如何使用 Karma 和 PhantomJS 正确地对 ReactDOM.render 进行单元测试？

Question

假设我在Index.tsx 上有以下内容：

ReactDOM.render(
    <h2 style={{textAlign: "center"}}>Hello World</h2>,
    document.getElementById("wrapper")
);

首先，我如何对ReactDOM.render 调用进行单元测试？其次，在 Karma + PhantomJS 上运行，我得到以下错误：

不变违规： _registerComponent(...): 目标容器不是 DOM 元素。

在 /tmp/karma-typescript-bundle-192osSfGKwYIxIW.js:188

这是因为document.getElementById("wrapper") 无法在 PhantomJS 下工作，因为没有 wrapper 元素。

解决此问题的最佳方法是什么？无论如何我可以在 PhantomJS 上插入/模拟一次 wrapper 元素吗？

Answer 1

如果 DOM 中没有 #wrapper 元素，您必须创建它并在运行特定测试之前准备环境。您可以使用jsdom，它可以帮助您在测试之间创建和维护 DOM。

React 有一个用于编写单元测试的官方包，称为 react-addons-test-utils。它使在您选择的测试框架中测试 React 组件变得容易。

更多信息可以在官方文档中找到：https://facebook.github.io/react/docs/test-utils.html

我向您推荐另一种解决方案。 Airbnb 发布了Enzyme，这使得编写单元测试变得超级容易。 API 有很好的文档记录并且很直接。 Test Utilities - React 文档中甚至还有关于酶的信息。

Airbnb has released a testing utility called Enzyme, 
which makes it easy to assert, manipulate, and traverse your React
Components' output. If you're deciding on a unit testing utility to
use together with Jest, or any other test runner, 
it's worth checking out: http://airbnb.io/enzyme/

在 Github 上，您几乎可以找到每个测试框架的入门者，甚至还有 starter for Karma with sample repositories。

最后一件事是，如果您决定使用 jsdom、react-addons-test-utils 或 enzyme，则不再需要 PhantomJS，因为您的所有测试都可以在 Node.js 中运行，这将使您的测试也更快。

---

这是每个工具为您作为开发人员提供的解释：

• Mocha - 它是一个测试框架和一个测试运行器。
• Karma - 这是一个测试运行器
• Jasmine - 这是一个测试框架
• Sinon - 这是一个模拟库
• ReactTestUtils - 这是一个小包，可以更轻松地测试 React 组件
• Enzyme - 它建立在 ReactTestUtils 和 jsdom 之上，但它提供了友好的开发人员 API。让测试 React 组件变得更加容易。
• jsdom - 这是一个模拟节点内的网络浏览器的小包

请记住，像 Jasmine 这样的一些测试框架还为您提供了一些模拟功能，因此您不需要 Sinon。

您可以将enzyme 与任何测试运行程序和框架一起使用。 您可以将它与 Karma 和 Jasmine 一起使用。 你可以将它与摩卡一起使用。 您可以将它与 Jest 一起使用。 有很多测试框架和运行器；）