Reactjs 与babel/laravel mix合作的笑话

我正在使用

jest

和

测试库/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"]
}

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

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"}]}
        />
    );
});

从“React”导入React；
从“@testing library/react”导入{render，firevent，waitForElement}；
导入“@测试库/jest dom/extend expect”；
从“axios”导入axiosMock；
//要测试的组件
从“../../components/BlogEditor/BlogEditor”导入BlogEditor；
开玩笑的模仿（“axios”）；
测试（“博客编辑器接收道具并呈现”，（）=>{
常量{getByTestId}=render(
);
});

我得到的错误相当隐晦

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)

这通常意味着您试图导入Jest无法解析的文件，例如，它不是纯JavaScript。
默认情况下，如果Jest看到一个Babel配置，它将使用它来转换您的文件，忽略“node_modules”。
以下是您可以做的：
•要转换某些“节点模块”文件，可以在配置中指定自定义“transformIgnorePatterns”。
•如果需要自定义转换，请在配置中指定“转换”选项。
•如果您只是想模拟您的非JS模块（例如二进制资产），您可以使用“moduleNameMapper”配置选项将其剔除。
您将在文档中找到这些配置选项的更多详细信息和示例：
https://jestjs.io/docs/en/configuration.html
细节：
语法错误：/Users/anadi/Code/adminpanel/resources/js/tests/BlogEditor/BlogEditor.test.js:意外标记（16:8）
14 |测试（“博客编辑器接收道具并呈现元素”，（）=>{
15 | const{getByTestId}=render(
> 16 |         
在Parser.raise（node_modules/@babel/Parser/src/Parser/location.js:41:63）
位于Parser.unexpected（node_modules/@babel/Parser/src/Parser/util.js:150:16）
在Parser.parsexpratom（node_modules/@babel/Parser/src/Parser/expression.js:1123:20）
在Parser.parsexprsubscripts（node_modules/@babel/Parser/src/Parser/expression.js:529:23）
在Parser.parseMaybeUnary（node_modules/@babel/Parser/src/Parser/expression.js:509:21）
在Parser.parsexprops（node_modules/@babel/Parser/src/Parser/expression.js:279:23）
在Parser.parseMaybeConditional（node_modules/@babel/Parser/src/Parser/expression.js:234:23）
在Parser.parseMaybeAssign（node_modules/@babel/Parser/src/Parser/expression.js:185:21）
在Parser.parsexprlistitem（node_modules/@babel/Parser/src/Parser/expression.js:2077:18）
在Parser.parseCallExpressionArguments（node_modules/@babel/Parser/src/Parser/expression.js:817:14）

问题在于我的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"
    }

"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"
    }

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