ReactTestUtils has been moved

reactjs unit-testing react-test-renderer
celsomtrindade picture celsomtrindade · Apr 11, 2017 · Viewed 7.9k times · Source

I'm starting learning React and while I was doing some tests i noticed two warning messages:

Warning: ReactTestUtils has been moved to react-dom/test-utils. Update references to remove this warning.

Warning: Shallow renderer has been moved to react-test-renderer/shallow. Update references to remove this warning.

They don't prevent the tests from running nor from properly validating, but there is always this error.

By looking at the docs, I found this page, even after I included those lines they recommend, the warning message is still showing up.

I'm trying a very simple test to start with, this is my code:

import React from "react";
import toJson from "enzyme-to-json";
import { shallow } from "enzyme";
import { About } from "./About";

describe('Rendering test', () => {
    const component = shallow(<About />);
    const tree      = toJson(component);

    it('Should render the About component', () => {
        expect(tree).toMatchSnapshot();
    })

    it('Should not contain an h2 element', () => {
        expect( component.contains('h2') ).toBe(false);
    })
})

What do I need to do in order to solve this warnings? I already updated all my packaged to the latest versions.

Answer

pearpages picture pearpages · Apr 28, 2017

If you are using React 0.14 or React <15.5, in addition to enzyme, you will have to ensure that you also have the following npm modules installed if they were not already:

npm i --save-dev react-addons-test-utils react-dom

If you are using React >=15.5, in addition to enzyme, you will have to ensure that you also have the following npm modules installed if they were not already:

npm i --save-dev react-test-renderer react-dom

Related questions

How to test snapshots with Jest and new React lazy 16.6 API

I have to components imported with the new React lazy API (16.6). import React, {PureComponent, lazy} from 'react'; const Component1 = lazy(() => import('./Component1')); const Component2 = lazy(() => import('./Component2')); class CustomComponent extends PureComponent { ... render() { return ( <…

Read More
Enzyme - How to access and set <input> value?

I'm confused about how to access <input> value when using mount. Here's what I've got as my test: it('cancels changes when user presses esc', done => { const wrapper = mount(<EditableText defaultValue="Hello" />); const input = wrapper.…

Read More
How to mock an exported const in jest

I have a file that relies on an exported const variable. This variable is set to true but if ever needed can be set to false manually to prevent some behavior if downstream services request it. I am not sure …

Read More