假设我在 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 上插入/模拟一次 wrapper 元素吗？
最佳答案
如果 DOM 中没有 #wrapper 元素，则必须创建它并在运行特定测试之前准备环境。您可以使用jsdom这可以帮助您在测试之间创建和维护 DOM。
React 有一个用于编写单元测试的官方包，名为 react-addons-test-utils。它可以轻松地在您选择的测试框架中测试 React 组件。
更多信息可以在官方文档中找到:https://facebook.github.io/react/docs/test-utils.html
我向您推荐另一种解决方案。 Airbnb 已发布 Enzyme这使得编写单元测试变得非常容易。 API 有很好的文档记录并且简单明了。测试实用程序 - React 文档中甚至有关于 enzyme 的信息。
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 - 这是一个在节点内模拟 Web 浏览器的小包
请记住，像 Jasmine 这样的一些测试框架还为您提供了一些模拟功能，因此您不需要 Sinon。
您可以将enzyme与任何测试运行程序和框架一起使用。
您可以将它与 Karma 和 Jasmine 一起使用。
您可以将其与摩卡一起使用。
您可以将其与 Jest 一起使用。
有很多测试框架和运行器;)
关于unit-testing - 如何使用 Karma 和 PhantomJS 正确地对 ReactDOM.render 进行单元测试？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41728059/