如何在 webpack 中使用 jest？

Question

我使用webpack 来开发一个 React 组件。这是它的一个简单版本：

'use strict';

require('./MyComponent.less');

var React = require('react');

var MyComponent = React.createClass({
  render() {
    return (
      <div className="my-component">
        Hello World
      </div>
    );
  }
});

module.exports = MyComponent;

现在，我想使用jest 测试这个组件。这是我的package.json 的相关内容：

"scripts": {
  "test": "jest"
},
"jest": {
  "rootDir": ".",
  "testDirectoryName": "tests",
  "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
  "unmockedModulePathPatterns": [
    "react"
  ]
}

运行npm test时，出现以下错误：

语法错误：/Users/mishamoroshko/react-component/src/tests/MyComponent.js：/Users/mishamoroshko/react-component/src/MyComponent.js：/Users/mishamoroshko/react-component/src/MyComponent。 less：意外的令牌非法

看起来 webpack 需要在 jest 运行测试之前处理 require('./MyComponent.less')。

我想知道我是否需要使用jest-webpack 之类的东西。如果是，有没有办法指定多个scriptPreprocessors？ （注意我已经用babel-jest了）

Answer 1

我发现忽略所需模块的最干净的解决方案是使用moduleNameMapper config（适用于最新版本 0.9.2）

文档很难理解。我希望以下内容会有所帮助。

将 moduleNameMapper 键添加到您的 packages.json 配置中。项目的键应该是所需字符串的正则表达式。带有“.less”文件的示例：

"moduleNameMapper": { "^.*[.](less|LESS)$": "EmptyModule" },

将 EmptyModule.js 添加到您的根文件夹：

/**
 * @providesModule EmptyModule
 */
module.exports = '';

注释很重要，因为 moduleNameMapper 使用 EmptyModule 作为该模块的别名 (read more about providesModule)。

现在每个与正则表达式匹配的 require 引用都将被替换为空字符串。

如果您将 moduleFileExtensions 配置与“js”文件一起使用，请确保您还将 EmptyModule 添加到“unmockedModulePathPatterns”中。

这是我最终得到的笑话配置：

"jest": {
  "scriptPreprocessor": "<rootDir>/node_modules/babel-jest",
  "moduleFileExtensions": ["js", "json","jsx" ],
  "moduleNameMapper": {
    "^.*[.](jpg|JPG|gif|GIF|png|PNG|less|LESS|css|CSS)$": "EmptyModule"
  },
  "preprocessorIgnorePatterns": [ "/node_modules/" ],
  "unmockedModulePathPatterns": [
    "<rootDir>/node_modules/react",
    "<rootDir>/node_modules/react-dom",
    "<rootDir>/node_modules/react-addons-test-utils",
    "<rootDir>/EmptyModule.js"
  ]
}

Answer 2

我最终得到了以下 hack：

// package.json

"jest": {
  "scriptPreprocessor": "<rootDir>/jest-script-preprocessor",
  ...
}


// jest-script-preprocessor.js
var babelJest = require("babel-jest");

module.exports = {
  process: function(src, filename) {
    return babelJest.process(src, filename)
      .replace(/^require.*\.less.*;$/gm, '');
  }
};

但是，我仍然想知道这个问题的正确解决方案是什么。

Answer 3

我刚刚发现使用 Jest 的 moduleNameMapper 配置更简单。

// package.json

"jest": {
    "moduleNameMapper": {
      "^.+\\.scss$": "<rootDir>/scripts/mocks/style-mock.js"
    }
}

// style-mock.js

module.exports = {};

更多详情请访问 Jest 的tutorial page。

Answer 4

我最近发布了Jestpack，这可能会有所帮助。它首先使用 Webpack 构建您的测试文件，因此任何自定义模块解析/加载器/插件等都可以正常工作，您最终会使用 JavaScript。然后它为 Jest 提供了一个自定义模块加载器，它了解 Webpack 模块运行时。

Answer 5

来自Jest docs：

// in terminal, add new dependency: identity-obj-proxy
npm install --save-dev identity-obj-proxy

// package.json (for CSS Modules)
{
  "jest": {
    "moduleNameMapper": {
      "\\.(css|less)$": "identity-obj-proxy"
    }
  }
}

上面的 sn-p 会将所有.less 文件路由到新的依赖项identity-obj-proxy，它会在调用时返回一个带有类名的字符串，例如'styleName' 为styles.styleName。

Answer 6

我认为一个不那么 hacky 的解决方案是将你的预处理器包装在一个与 javascript 文件匹配的文件名的条件中：

if (filename.match(/\.jsx?$/)) {
    return babelJest.process(src, filename);
} else {
    return '';
}

即使您没有在要求行中明确设置扩展名并且不需要在源代码上进行正则表达式替换，这也有效。

Answer 7

这种模式我也遇到过类似的问题

import React, { PropTypes, Component } from 'react';
import styles from './ContactPage.css';
import withStyles from '../../decorators/withStyles';

@withStyles(styles)
class ContactPage extends Component {

参见https://github.com/kriasoft/react-starter-kit/blob/9204f2661ebee15dcb0b2feed4ae1d2137a8d213/src/components/ContactPage/ContactPage.js#L4-L7的示例

运行 Jest 我有两个问题：

• .css 的导入
• 申请装饰器@withStyles (TypeError: <...> (0 , _appDecoratorsWithStyles2.default)(...) is not a function)

第一个已通过在脚本预处理器中模拟 .css 本身来解决。

第二个已通过使用unmockedModulePathPatterns从自动模拟中排除装饰器来解决

module.exports = {
  process: function (src, filename) {

    ...

    if (filename.match(/\.css$/)) src = '';

    ...

    babel.transform(src, ...
  }
}

基于https://github.com/babel/babel-jest/blob/77a24a71ae2291af64f51a237b2a9146fa38b136/index.js的示例

另请注意：当您使用 jest 预处理器时，您应该清理缓存：

$ rm node_modules/jest-cli/.haste_cache -r

Answer 8

从 Misha 的回复中获得灵感，我创建了一个 NPM 包来解决这个问题，同时还处理了我遇到的更多场景：

webpack-babel-jest

希望这可以为下一个人节省几个小时。

Answer 9

如果您使用 babel，您可以在 babel 转换期间使用 https://github.com/Shyp/babel-plugin-import-noop 之类的东西去除不需要的导入，并配置您的 .babelrc test env 以使用该插件，如下所示：

{
  "env": {
    "development": {
      ...
    },
    "test": {
      "presets": [ ... ],
      "plugins": [
        ["import-noop", {
          "extensions": ["scss", "css"]
        }]
      ]
    }
  }
}

Answer 10

我们在 CSS 文件中遇到了类似的问题。正如您之前提到的jest-webpack 很好地解决了这个问题。您也不必模拟或使用任何模块映射器。对我们来说，我们将 npm 测试命令从 jest 替换为 jest-webpack，它就可以正常工作了。

Answer 11

问这个问题已经 5 年了，但对我来说仍然很困惑，我不敢相信让 jest 和 webpack 工作这么难，直到我尝试了这个：

添加 babel-jest 和 babel 预设：

yarn add --dev babel-jest @babel/preset-env

添加 babel 配置：

// babel.config.js
module.exports = {
  presets: ["@babel/preset-env"]
};

这可能对你有用，也可能对你不起作用，因为问题标题仅指 jest 和 webpack，人们可能会像我一样偶然发现这篇文章，对如何使 jest 与 webpack 一起工作一无所知，我希望至少我的回答有所帮助如果这对您没有帮助，请联系他们。

Answer 12

Webpack 是一个很棒的工具，但我不需要用我的 Jest 单元测试来测试它的行为，并且在运行单元测试之前添加一个 webpack 构建只会减慢这个过程。 教科书上的答案是使用 "moduleNameMapper" 选项模拟非代码依赖项

https://facebook.github.io/jest/docs/webpack.html#handling-static-assets