Jest 没有解析导入文件

Question

我正在尝试使用 Jest 和 Enzyme 测试我的 Next.js 项目。当我尝试从我的组件中导入一个文件来测试它时，虽然会抛出错误。这是我的文件...

在 package.json 中我开玩笑的配置是：

 "jest": {
"setupFilesAfterEnv": "<rootDir>/jest.setup.js",
"testPathIgnorePatterns": [
  "<rootDir>/.next/",
  "<rootDir>/node_modules/"
],
"transform": {
  "\\.(gql|graphql)$": "jest-transform-graphql",
  ".*": "babel-jest",
  "^.+\\.js?$": "babel-jest"
}


 },

  "//": "I prefer this over a .babelrc file",
  "babel": {
    "env": {
      "development": {
        "presets": [
          "next/babel"
        ],
        "plugins": [
          [
            "styled-components",
            {
              "ssr": true,
              "displayName": true
            }
          ]
        ]
      },
      "production": {
        "presets": [
          "next/babel"
        ],
        "plugins": [
          [
            "styled-components",
            {
              "ssr": true,
              "displayName": true
            }
          ]
        ]
      },
      "test": {
        "presets": [
          [
            "next/babel",
            {
              "preset-env": {
                "modules": "commonjs"
              }
            }
          ]
        ],
        "plugins": [
          [
            "styled-components",
            {
              "ssr": true,
              "displayName": true
            }
          ]
        ]
      }
    }
  }

随后在 jest.setup.js 中：

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

但是，每当我想**导入文件时，我总是会遇到此错误 **（例如，在这里我尝试导入一个文件，即“import ItemComponent from '../components/Item ';"):

Jest 遇到了意外的令牌

这通常意味着您正在尝试导入 Jest 的文件 无法解析，例如它不是纯 JavaScript。

默认情况下，如果 Jest 看到 Babel 配置，它将使用它来转换 您的文件，忽略“node_modules”。语法错误：意外 标识符

详情：

SyntaxError: C:\Users\Welcome\Desktop\Advanced-React-master\sick-fits\frontend\__tests__\Item.test.js: Unexpected token (20:28)

  18 | describe('<Item/>', () => {
  19 |   it('renders and matches the snapshot', () => {
> 20 |     const wrapper = shallow(<ItemComponent item={fakeItem} />);
     |                             ^
  21 |     expect(wrapper).toMatchSnapshot();
  22 |   });
  23 |   // it('renders and displays properly', () => {

  at Parser.raise (node_modules/@babel/parser/lib/index.js:3939:15)
  at Parser.unexpected (node_modules/@babel/parser/lib/index.js:5248:16)
  at Parser.parseExprAtom (node_modules/@babel/parser/lib/index.js:6328:20)
  at Parser.parseExprSubscripts (node_modules/@babel/parser/lib/index.js:5924:21)
  at Parser.parseMaybeUnary (node_modules/@babel/parser/lib/index.js:5903:21)
  at Parser.parseExprOps (node_modules/@babel/parser/lib/index.js:5812:21)
  at Parser.parseMaybeConditional (node_modules/@babel/parser/lib/index.js:5784:21)
  at Parser.parseMaybeAssign (node_modules/@babel/parser/lib/index.js:5731:21)
  at Parser.parseExprListItem (node_modules/@babel/parser/lib/index.js:6995:18)
  at Parser.parseCallExpressionArguments (node_modules/@babel/parser/lib/index.js:6124:22)

任何帮助将不胜感激

Answer 1

尝试从您的package.json 中删除这两行：

  ".*": "babel-jest",
  "^.+\\.js?$": "babel-jest"

理论上，这些是不需要的：https://jestjs.io/docs/en/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object

您添加的自定义配置可能会导致问题。理论上，jest 应该默认使用babel-jest 转换您的js 文件。我当然有一个最近的 NextJS 项目与 jest 合作，在我的 package.json 中没有声明 babel-jest 配置。