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

问题描述

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

'use strict';require('./MyComponent.less');var React = require('react');var MyComponent = React.createClass({使成为() {返回 (<div className="我的组件">你好世界

);}});module.exports = MyComponent;

现在，我想使用 jest 测试这个组件.这是我的 package.json 中的相关部分:

脚本":{测试":开玩笑"},开玩笑":{"rootDir": ".","testDirectoryName": "测试","scriptPreprocessor": "/node_modules/babel-jest",unmockedModulePathPatterns":[反应"]}

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

<块引用>

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

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

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

解决方案

我发现忽略所需模块的最干净的解决方案是使用 moduleNameMapper 配置(适用于最新版本 0.9.2)

文档很难遵循.我希望以下内容会有所帮助.

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

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

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

/*** @providesModule 空模块*/module.exports = '';

注释很重要，因为 moduleNameMapper 使用 EmptyModule 作为该模块的别名(阅读有关提供模块的更多信息).

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

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

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

玩笑":{"scriptPreprocessor": "/node_modules/babel-jest","moduleFileExtensions": ["js", "json","jsx"],模块名称映射器":{"^.*[.](jpg|JPG|gif|GIF|png|PNG|less|LESS|css|CSS)$": "EmptyModule"},"preprocessorIgnorePatterns": [ "/node_modules/" ],unmockedModulePathPatterns":["/node_modules/react","/node_modules/react-dom","/node_modules/react-addons-test-utils",/EmptyModule.js"]}

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;

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

When running npm test, I get the following error:

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

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

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.

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

Add a EmptyModule.js to your root folder:

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

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.

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屋！