jest snapshot: ReferenceError: React is not defined

Question

I am using Jest to test, falling in love with snapshot.

I am not importing React in my components because I provide it by webpack when I bundle the code, but when I run the test webpack is not envolved and when I get an:

the error:

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)

the webpack:

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

the test:

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();
    });
});

the component:

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;

Would you please help me with some kind of example? I have seen there is something around about those kind of issues, but finally I couldnt find (or undestand) the solutions.

Answer 1

Try importing React in the Breadcrumb file.