21

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.

Community
  • 1
  • 1
celsomtrindade
  • 4,501
  • 18
  • 61
  • 116

4 Answers4

21

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
pearpages
  • 18,703
  • 1
  • 26
  • 27
16

I think it's coming from using the shallow render function from enzyme, which has not been updated for v15.5 yet (there is a pull request for it though).

You can try to use one of the other render function (render or mount), but this will change the semantics of your test (and may or may not still produce the warning).

Your other option is to not use enzyme and use react-test-renderer/shallow yourself, but the enzyme API is quite nice for testing components.

My advice is to wait for the version of enzyme and just live with the warning for now.

Michael Peyper
  • 6,814
  • 2
  • 27
  • 44
  • So, it may be worth waiting until they fix it, right? Since it's just a warning and nothing is breaking. – celsomtrindade Apr 11 '17 at 10:54
  • 2
    Totally. The enzyme pull request shouldn't take long to go through. – Michael Peyper Apr 11 '17 at 11:03
  • I am getting this with React v15.1.0? How can I remove these warnings? – Peter Feb 02 '18 at 06:13
  • @VishalGulati, try [Pere Pages' answer](https://stackoverflow.com/questions/43334942/reacttestutils-has-been-moved/43338870?noredirect=1#comment75056989_43669552) as it seems to be better for older versions of React. – Michael Peyper Feb 02 '18 at 12:33
  • @MichaelPeyper I already have these modules installed but still getting this error – Peter Feb 03 '18 at 12:27
  • @VisalGulati there's not much to go on. I suggest opening a new issue, clearly stating which versions of react, related packages and enzyme. Also include a sample test that produces the warning and the output or that test. – Michael Peyper Feb 04 '18 at 08:14
1

Update August of 2017

If you install react-test-renderer it will work but all react-* versions should match:

e.g.
react@15.4.2
react-test-renderer@15.4.2
react-dom@15.4.2
react-addons-test-utils@15.4.2

In my environment, only this config worked!

Yuri Pereira
  • 1,945
  • 17
  • 24
1

I was still receiving the following warning after trying steps listed above.

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

Updating the path in \node_modules\react-addons-test-utils\index.js solved this for me.

Old:

lowPriorityWarning(
  false,
  'ReactTestUtils has been moved to react-dom/test-utils. ' +
    'Update references to remove this warning.'
);

module.exports = require('react-dom/lib/ReactTestUtils');

New:

lowPriorityWarning(
  false,
  'ReactTestUtils has been moved to react-dom/test-utils. ' +
    'Update references to remove this warning.'
);

module.exports = require('react-dom/test-utils');
Gareth
  • 31
  • 1