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

Question

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

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

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

Invariant Violation: _registerComponent(...): Target container is not a DOM element.

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

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

解决此问题的最佳方法是什么？无论如何，我可以在 PhantomJS 上 insert/mock 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 - 这是一个测试框架和测试运行ner.
Karma - 这是一个测试运行ner
Jasmine - 这是一个测试框架
Sinon - 这是一个模拟库
ReactTestUtils - 这是一个小包，可以更轻松地测试 React 组件
Enzyme - 它建立在 ReactTestUtils 和 jsdom 之上，但它提供友好的开发人员 API。让测试 React 组件更容易。
jsdom - 这是一个在节点内模拟网络浏览器的小包

请记住，一些测试框架（如 Jasmine）也为您提供了一些模拟功能，因此您不需要 Sinon。

您可以将 enzyme 与任何测试运行工具和框架一起使用。您可以将它与 Karma 和 Jasmine 一起使用。您可以将它与摩卡一起使用。您可以将它与 Jest 一起使用。有很多测试框架和运行人员 ;)

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

How to properly unit test ReactDOM.render with Karma and PhantomJS?

unit-testing

phantomjs

karma-runner

reactjs

karma-mocha