Babel在运行Jest时不会编译.test.js文件

Question

在运行纱线运行jest --no-cache时，会抛出一个错误：

SyntaxError: Unexpected token import

我最好的猜测是，babel没有达到这个测试文件。他们需要包含什么特别的东西.babelrc？

路径：

/src/tests/LandingPage.test.js

测试文件：

import React from 'react';
import ReactShallowRenderer from 'react-test-renderer/shallow';
import LandingPage from '../../components/LandingPage';

test('Should render LandingPage correctly', () => {
  const renderer = new ReactShallowRenderer();
  renderer.render(<LandingPage />);
  expect(renderer.getRenderOutput()).toMatchSnapshot();
});

.babelrc：

{
  "presets": [
    "env",
    "react"
  ],
  "plugins": [
    "transform-class-properties",
    "transform-object-rest-spread"
  ]
}

Answer 1

感谢@hannad rehmann在正确的方向上轻推这里是对我有用的解决方案。

安装babel-jest

yarn add babel-jest --dev

配置.babelrc for test env

Jest会自动将您的Env设置为测试，因此请将您想要的任何配置复制到测试环境。

{
  "presets": [
    "env",
    "react"
  ],
  "plugins": [
    "transform-class-properties",
    "transform-object-rest-spread"
  ],
  "env": {
    "test": {
      "presets": [
        "env",
        "react"
        ],
      "plugins": [
        "transform-class-properties",
        "transform-object-rest-spread"
      ]
    }
  }
}

将jest.config.json添加到项目根目录

{
  "transform": {
    "^.+\\.jsx?$": "babel-jest"
  }
}

最后，让您的测试脚本知道在哪里找到配置文件

我刚将它添加到package.json中的测试脚本中，但您也可以在命令行中运行它。

"scripts": {
    "test": "jest --config=jest.config.json --watch"
},

Answer 2

哦。这个问题让我浪费了这么多天。这是你需要做的。 在那之前检查这些文件。

1）.babelrc安装相应的模块并将它们添加到package.json 定义不同的env支持，因为您的jest总是将NODE_ENV更改为"test"

{
  "presets": [
    [
      "env",
      { "modules": false }],
    "react"
    ],
    "plugins": [
      "react-hot-loader/babel",
      "transform-object-rest-spread",
      "transform-class-properties",
      "dynamic-import-webpack"
    ],
  "env":{
    "test":{
      "presets": [
        "env",
        "react"
    ],
    "plugins": [
      "transform-object-rest-spread",
      "transform-class-properties",
      "dynamic-import-webpack"
    ]}
  }
}

2）将此添加到您的package.json

 "jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.js"
    },
    "automock": false,
    "transform": {
      "^.+\\.jsx?$": "<rootDir>/node_modules/babel-jest",
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js"
    },
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleDirectories": [
      "node_modules"
    ],
    "unmockedModulePathPatterns": [
      "<rootDir>/node_modules/react/",
      "<rootDir>/node_modules/react-dom/"
    ],
    "transformIgnorePatterns": [
      "/node_modules/"
    ],
    "coveragePathIgnorePatterns": [
      "/node_modules/"
    ],
    "modulePathIgnorePatterns": [
      "/node_modules/"
    ],
    "collectCoverage": true,
    "coverageReporters": [
      "json",
      "lcov",
      "text"
    ]
     }

我对此问题的理解是，Jest会将您的NODE_ENV更改为"test"，并且Babel没有针对此env的任何配置，我们通常会为开发和生产环境定义Babel配置。当没有babel转换时，import关键字实际上变为undefined，因为它实际上在JS上下文中不存在。

Answer 3

对于任何寻求解决方案的人来说，我的问题是我出于某种原因将NODE_ENV环境变量配置为development。

现在 JEST仅在尚未定义env的情况下将test设置为NODE_ENV ，否则它将使用NODE_ENV的值。这意味着，如果您在.babelrc或babel.config文件中添加了test的专用部分（如下所示），它将被忽略，并且是默认值（或与您的{ {1}}）将代替！

NODE_ENV

因此，如果看起来JEST不会转换您的测试文件（运行相对于您的{ ... "env": { "test": { presets: [ "@babel/preset-env" ] } } ... } 或SyntaxError: Cannot use import statement outside a module文件的测试时，其中的一个符号可以是test.js）， d建议检查是否已定义spec.js。 使用NODE_ENV命令（在MacOS和Linux上，或在您的环境中使用的适当命令）检查已配置的环境变量。如果您已经将其配置为某些内容（env以外的其他内容），则需要删除该内容或在jest命令前加上适当的覆盖：test。

我希望它会帮助其他人。花了我几个小时找出正在发生的事情...