如何在Webpack中使用Jest? [英] How to use jest with webpack?

问题描述

我使用 webpack 开发了一个React组件.这是它的一个简单版本:

I use webpack to develop a React component. Here is a simple version of it:

'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的相关内容:

Now, I would like to test this component using jest. Here is the relevant bit from my package.json:

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

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

When running npm test, I get the following error:

语法错误:/Users/mishamoroshko/react-component/src/tests/MyComponent.js:/Users/mishamoroshko/react-component/src/MyComponent.js:/Users/mishamoroshko/react-component/src/MyComponent.减:意外令牌ILLEGAL

SyntaxError: /Users/mishamoroshko/react-component/src/tests/MyComponent.js: /Users/mishamoroshko/react-component/src/MyComponent.js: /Users/mishamoroshko/react-component/src/MyComponent.less: Unexpected token ILLEGAL

像webpack一样，在开玩笑才能运行测试之前，需要先处理require('./MyComponent.less').

Looks like webpack needs to process require('./MyComponent.less') before jest can run the test.

我想知道是否需要使用 jest-webpack 之类的东西.如果是，是否可以指定多个scriptPreprocessor? (请注意，我已经使用了babel-jest)

I wonder if I need to use something like jest-webpack. If yes, is there a way to specify multiple scriptPreprocessors? (note that I already use babel-jest)

推荐答案

我发现的用于忽略必需模块的最简洁的解决方案是使用

The cleanest solution I found for ignoring a required module is to use the moduleNameMapper config (works on the latest version 0.9.2)

文档难以理解.希望以下内容对您有所帮助.

The documentation is hard to follow. I hope the following will help.

将moduleNameMapper密钥添加到您的packages.json配置中.项的键应为所需字符串的正则表达式. ".less"文件的示例:

Add moduleNameMapper key to your packages.json config. The key for an item should be a regex of the required string. Example with '.less' files:

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

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

Add a EmptyModule.js to your root folder:

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

注释很重要，因为moduleNameMapper使用EmptyModule作为此模块的别名(了解有关providerModule的更多信息).

The comment is important since the moduleNameMapper use EmptyModule as alias to this module (read more about providesModule).

现在，每个与正则表达式匹配的要求引用都将替换为空字符串.

Now each require reference that matches the regex will be replaced with an empty string.

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

If you use the moduleFileExtensions configuration with a 'js' file, then make sure you also add the EmptyModule to your 'unmockedModulePathPatterns'.

这是我最后的玩笑配置:

Here is the jest configuration I ended up with:

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

这篇关于如何在Webpack中使用Jest?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！