ReactTestUtils已经被移动。

Question

我开始学习React，当我做一些测试的时候我注意到了两个警告信息：

警告：ReactTestUtils已经迁移到react-dom/test-utils。更新引用以删除此警告。

警告：Shallow渲染器已经迁移到react-test-renderer/shallow。更新引用以删除此警告。

它们不会阻止测试运行或正确验证，但总是会出现这个错误。

看了文档后，我找到了这个页面，即使我包含了他们建议的那些代码行，警告消息仍然显示。

我正在尝试一个非常简单的测试，这是我的代码：

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

我需要做什么才能解决这些警告？我已经将所有的软件包更新到最新版本了。

- celsomtrindade

---

检查Enzyme的Package JSON/源代码，他们可能还在使用旧版本。 - Rei Dien

Answer 1

如果您正在使用React 0.14或React <15.5，除了enzyme外，您还需要确保已安装以下npm模块（如果它们尚未安装）：

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

如果您使用的是React >=15.5，除了enzyme之外，还需要确保如果它们尚未安装，则还安装了以下npm模块：

如果您使用的是React >=15.5，除了enzyme之外，您还需要确保已安装以下的npm模块（如果没有安装）：

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

- pearpages

---

这对我解决了问题。 - Ajit Goel

在指定react-test-renderer版本与我的react版本匹配后，这对我起作用了。例如：npm i --save-dev react-test-renderer@15.6.2。 - GraehamF

Answer 2

我认为这是由于使用了Enzyme的shallow渲染函数，该函数尚未更新至v15.5（不过已经有pull request了）。你可以尝试使用其他渲染函数（render或mount），但这会改变测试的语义（可能仍然会产生警告）。另一种选择是不使用Enzyme，而是自己使用react-test-renderer/shallow，但是Enzyme的API非常适合测试组件。我的建议是等待Enzyme的版本，并暂时忽略此警告。

- Michael Peyper

---

所以，等他们修复它可能是值得的，对吧？因为这只是一个警告，没有什么东西会破坏。 - celsomtrindade

完全没问题。酶拉取请求不应该需要很长时间才能完成。 - Michael Peyper

我在使用React v15.1.0时遇到了这个问题？我该如何去除这些警告？ - Peter

@VishalGulati，尝试使用Pere Pages的答案，因为它似乎更适用于旧版本的React。 - Michael Peyper

@MichaelPeyper 我已经安装了这些模块，但仍然出现这个错误。 - Peter

@VisalGulati，目前并没有太多信息可以参考。我建议您打开一个新的问题，并清楚地说明使用的React版本、相关软件包和Enzyme版本。还要包括一个能够复现警告并输出或测试结果的样例测试。 - Michael Peyper

Answer 3

我尝试了上述步骤后，仍然收到以下警告。

警告：ReactTestUtils已移动到react-dom/test-utils。更新引用以消除此警告。

在 \node_modules\react-addons-test-utils\index.js 中更新路径解决了我的问题。

旧：

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

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

新的：

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

Answer 4

2017年8月更新

如果您安装了react-test-renderer，它将可以工作，但所有的react-*版本都应该匹配：

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

在我的环境中，只有这个配置起作用了！

- Yuri Pereira