babel-jest不处理模块内的ES6

Question

我正在尝试在一个使用ES6模块的基于React的项目上设置Jest。然而，我似乎对ES6模块有问题，我正在使用babel-jest，并且相信我已经正确地设置了这个组件(Jest自动检测它)。

然而，Jest在使用ES6导入时似乎没有问题，但是，一旦它碰到它所阻塞的导入模块中的一个导入语句，它就会立即出现问题。这就好像它只是在传递初始测试脚本，而不是导入的任何模块。我尝试了各种配置，并尝试搜索谷歌没有运气。在没有任何导入的情况下运行测试很好。

以下是错误：

({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Predications from './predications';
                                                                                         ^^^^^^
SyntaxError: Unexpected token import

下面是配置的相关部分：

jest.conf.json

{
  "testRegex": "\/test\/spec\/.*\\.js$",
}

.babelrc

{
  "presets": ["es2015", "stage-0", "react"]
}

测试脚本

import React from 'react';
import { mount, shallow } from 'enzyme';
import Slider from 'react-slick';
import Carousel from '../../client/components/carousel/carousel.js'; // test chokes on when I include this module

describe('carousel component', () => {
  it('is a test test case', () => {
    expect(1 + 2).toEqual(3);
  });
});

更新：

正如建议的那样，我尝试过在没有jest.conf.js的情况下运行测试，但是为了让Jest找到我的测试，我需要testRegex，我尝试将测试移到默认的测试目录中，它们仍然失败。

我想澄清一下，测试本身运行良好，问题似乎是我的一个导入模块在哪里使用ES6，在上面的示例中，如果我不导入我的carousel组件，那么测试就会运行良好，一旦我导入该文件中的import语句，测试就会停止运行。似乎导入的模块没有被转移。

更新#2

经过一些调查，问题似乎是巴贝尔没有在ES6的node_modules中传播。我在这里创建了一个示例repo来演示这一点：https://github.com/jamiedust/babel-jest-example

我知道第三方模块应该处理它们自己的转换，然而我们有一些模块托管在我们自己的npm注册中心，并且在项目之间被重用，在这些情况下Webpack处理转换，对于我们需要这些node_modules的Jest测试，我们需要由Babel来转换，或者一种利用webpack来为我们做这件事的方法。

溶液

在package.json (或Jest配置文件)中添加以下配置。

"jest": {
  "transformIgnorePatterns": [
    "/node_modules/(?!test-component).+\\.js$"
  ]
}

Answer 1

默认情况下，node_modules中的任何代码都会被babel-jest忽略，请参见Jest选项transformIgnorePatterns。我还创建了一个关于您的示例回购，所以您可以看到它是有效的。

虽然这是可行的，但我发现在包含ES模块的大量依赖关系的实际应用程序中，它非常慢。Jest代码库有一种稍微不同的方法，您可以在babel-jest转换依赖项中找到这种方法。这在Windows上也要花费更长的时间，请参阅在空的回购上花10秒时间。

如果进行“单元”测试，那么嘲笑可能是更好的方法。

Answer 2

您可以尝试将transform- to 2015模块-commonjs插件添加到您的babel配置文件中，只用于测试。下面是一个配置文件示例，它告诉babel只有在测试环境中才会使用transpile模块。你可以把它放在你的预设之下：

{
  "presets": [
    "react",
    ["es2015", {"modules": false, "loose": true}]
  ],
  "env": {
    "test": {
      "plugins": ["transform-es2015-modules-commonjs"]
    }
  }
}

你可以在这里读到这个插件：

https://www.npmjs.com/package/babel-plugin-transform-es2015-modules-commonjs

然后，当在命令行上运行Jest测试时，请指定NODE_ENV=test (您可能需要在对babel配置进行更改后第一次向命令中添加--无缓存标志，因为Jest缓存babel输出，但之后您可以关闭它：

NODE_ENV=test jest --no-cache

我是在前端大师的Brian的反应研讨会上了解到这个问题的。https://frontendmasters.com/courses/

Answer 3

面对同样的问题，遵循解决的步骤，

1. 安装babel-jest
2. 在jest配置中添加以下配置

       transform: {
           '^.+\\.js?$': require.resolve('babel-jest')
       }

1. 确保您有babel.config.js (您的配置可能与下面提供的配置不同)

    module.exports = {
      "env": {
        "test": {
          presets: [
            [
              '@babel/preset-env',
              {
                targets: {
                  node: 'current',
                },
              },
            ],
          ]
        }
      }
    };