怎么和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;

现在，我想使用取笑测试这个组件。这是我的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:意外令牌SyntaxError:非法

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

我想知道我是否需要使用类似开玩笑-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作为这个模块(阅读更多关于providesModule的信息)的别名。

现在，与regex匹配的每个require引用都将被替换为空字符串。

如果您使用带有“js”文件的moduleFileExtensions配置，那么确保您也将EmptyModule添加到您的“unmockedModulePathPatterns”中。

下面是我最后得到的jest配置：

"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's 教程页上有更多细节。