笑话快照：ReferenceError：React 未定义答案

【问题标题】：jest snapshot: ReferenceError: React is not defined笑话快照：ReferenceError：React 未定义
【发布时间】：2017-07-25 22:00:56
【问题描述】：

我正在使用Jest进行测试，爱上了snapshot。

我没有在我的组件中导入 React，因为我在捆绑代码时由 webpack 提供它，但是当我运行测试时 webpack 没有被包含并且当我得到一个：

错误：

ReferenceError: React is not defined

  at Object.<anonymous> (src/components/breadcrumb/Breadcrumb.jsx:22:35)
  at Object.<anonymous> (test/components/components.test.js:3:19)
  at process._tickCallback (internal/process/next_tick.js:109:7)

webpack：

new webpack.ProvidePlugin({
    React: 'react'
})

测试：

import React from 'react';
import Breadcrumb from '../../src/components/breadcrumb/Breadcrumb';
import renderer from 'react-test-renderer';

describe.only('Components ', () => {
    test('Breadcrumb.jsx', () => {
        const tree = renderer.create(
            <Breadcrumb path={['uno', 'due']} />
        ).toJSON();

        expect(tree).toMatchSnapshot();
    });
});

组件：

import PropTypes from 'prop-types';

import I18n from '../../decorators/I18n';
@I18n
class Breadcrumb extends React.Component {

    static propTypes = {
        path: PropTypes.array.isRequired
    }

    getBreadcrumb = () => {
        return this.props.path.map((el, key) => {
            return (
                <span key={key}>{el}</span>
            );
        });
    }

    render() {
        return <div>{this.getBreadcrumb()}</div>;
    }
}

export default Breadcrumb;

你能帮我举个例子吗？我已经看到关于这类问题的一些东西，但最后我找不到（或不明白）解决方案。

【问题讨论】：

好吧，当您以这种方式提供React 时，代码仅在通过您的 webpack 脚本运行时才有效。您是否有充分的理由这样做而不需要定期使用 React？

标签： reactjs snapshot jestjs

【解决方案1】：

尝试在面包屑文件中导入 React。

【讨论】：