Jest with webpack 提供插件答案

【问题标题】：Jest with webpack provide pluginJest with webpack 提供插件
【发布时间】：2017-01-22 02:38:48
【问题描述】：

我正在使用 webpack-provide-plugin 来导入 react。

new webpack.ProvidePlugin({
        "React": "react",
}),

// text.jsx

let text = (props) => (
  <div> 
    <p class="text">this.props.text</p>
  </div>
)

export default text

//text.test.js

import React from 'react';
import { shallow } from 'enzyme';
import text from 'text';

it('Renders text', () => {
    const wrapper = shallow(<text/>);
    expect(wrapper.hasClass("text")).toEqual(true);
});

但是在用 jest 运行 react 组件测试时，我得到了错误

ReferenceError: React is not defined

当然，因为 react 没有显式导入。除了显式导入和放弃提供插件之外，还有其他方法可以解决这个问题吗？

【问题讨论】：

没有找到解决办法。但事后看来，我认为最好删除 webpack providePlugin 配置。因为导入应该更好地留给代码然后构建/捆绑配置。
同样的问题，我认为这很重要
模拟有帮助吗？我删除了 providePlugin 所以摆脱了这个问题

标签： reactjs import webpack jestjs es6-modules

【解决方案1】：

您可以像这样为 Jest 创建一个设置文件：

//jest.setup.js
window.React = require('react');

并将其添加到 Jest 配置中： "setupFiles": [ "<rootDir>/jest.setup.js" ], http://facebook.github.io/jest/docs/configuration.html#setupfiles-array

【讨论】：

请注意，这也适用于DefinePlugin。

【解决方案2】：

在你使用 webpack 提供插件证明这个变量时删除这一行；

从“反应”导入反应；

【讨论】：