开玩笑地使用 babel / laravel-mix答案

【问题标题】：getting jest to work with babel / laravel-mix开玩笑地使用 babel / laravel-mix
【发布时间】：2020-06-08 02:20:19
【问题描述】：

我正在使用 jest 和 testing-library/react 在 Laravel 应用程序中测试我的 ReactJS 组件。

我的测试中断了，因为即使将要测试的组件导入到测试中，jest 也无法识别它。我在jest.config.js中有以下设置

module.exports = {
  testRegex: 'resources/js/tests/.*.test.js$',
  roots: ["<rootDir>/resources/js/"],
  moduleDirectories: ["resources/js/components", "resources/js/containers", "resources/js/views", "node_modules"]
}

在package.json 文件中

"test": "cross-env NODE_ENV=test jest",

这是一个由于错误而失败的简单测试

import React from "react";
import { render, fireEvent, waitForElement } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";
import axiosMock from "axios";
// the component to test
import BlogEditor from "../../components/BlogEditor/BlogEditor";
jest.mock("axios");

test("Blog Editor recieves props and renders", () => {
    const { getByTestId } = render(
        <BlogEditor
            tags={[{ id: 1, name: "A tag"}]}
            suggestions={[{id: 2, name: "A Suggestion"}]}
        />
    );
});

我得到的错误相当神秘

Jest 遇到了意外的令牌

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

Here's what you can do:
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html

Details:

SyntaxError: /Users/anadi/Code/adminpanel/resources/js/tests/BlogEditor/BlogEditor.test.js: Unexpected token (16:8)

  14 | test("Blog Editor recived props and renders element", () => {
  15 |     const { getByTestId } = render(
> 16 |         <BlogEditor
     |         ^
  17 |             tags={[{ id: 1, name: "A tag"}]}
  18 |             suggestions={[{id: 2, name: "A Suggestion"}]}
  19 |         />

  at Parser.raise (node_modules/@babel/parser/src/parser/location.js:41:63)
  at Parser.unexpected (node_modules/@babel/parser/src/parser/util.js:150:16)
  at Parser.parseExprAtom (node_modules/@babel/parser/src/parser/expression.js:1123:20)
  at Parser.parseExprSubscripts (node_modules/@babel/parser/src/parser/expression.js:529:23)
  at Parser.parseMaybeUnary (node_modules/@babel/parser/src/parser/expression.js:509:21)
  at Parser.parseExprOps (node_modules/@babel/parser/src/parser/expression.js:279:23)
  at Parser.parseMaybeConditional (node_modules/@babel/parser/src/parser/expression.js:234:23)
  at Parser.parseMaybeAssign (node_modules/@babel/parser/src/parser/expression.js:185:21)
  at Parser.parseExprListItem (node_modules/@babel/parser/src/parser/expression.js:2077:18)
  at Parser.parseCallExpressionArguments (node_modules/@babel/parser/src/parser/expression.js:817:14)

【问题讨论】：

你的组件是什么样的？由于道具从控制器传递到组件的方式，我无法测试我的组件。现在，只有当某个 div 在 dom 中时，我才会渲染我的组件。然后通过 data 属性从所述 div 获取道具并传递给组件。我不确定这是否正确。

标签： reactjs laravel-mix babel-jest

【解决方案1】：

问题出在我的 babel 和 jest 配置上，将 jest 配置移至 package.json（我不知道为什么这实际上有帮助）但确实有

"jest": {
    "verbose": true,
    "clearMocks": true,
    "collectCoverage": true,
    "testRegex" : "resources/js/tests/.*.test.js$",
    "roots": ["<rootDir>/resources/js/"],
    "moduleDirectories": ["resources/js/components", "resources/js/containers", "resources/js/views", "node_modules"],
    "transform": {
        "^.+\\.js$": "babel-jest"
    },
    "moduleNameMapper": {
        "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/resources/js/__mocks__/fileMock.js",
        "\\.(css|scss)$": "<rootDir>/resources/js/__mocks__/styleMock.js"
    }

也更新了 babel 配置

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-syntax-dynamic-import"
  ]
}

【讨论】：