0

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.

1
  • Well when you are providing React this way, the code is only valid when running through your webpack script. Is there a really good reason for you to do that and not require React regularly? Commented Jul 11, 2017 at 11:25

1 Answer 1

2

Try importing React in the Breadcrumb file.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.