如何使用webpack玩笑？

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,我收到以下错误:

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

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

我想知道我是否需要使用像jest-webpack这样的东西.如果是,有没有办法指定多个scriptPreprocessors？(注意我已经使用过babel-jest)

Answer 1

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

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

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

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

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

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

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

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

如果将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

我最终得到了以下黑客攻击:

// 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 教程页面的更多详细信息.