如何使用Karma和PhantomJS正确地对ReactDOM.render进行单元测试? [英] How to properly unit test ReactDOM.render with Karma and PhantomJS?

问题描述

说我在Index.tsx上有以下内容:

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

首先，如何精确测试ReactDOM.render调用?其次，在Karma + PhantomJS上运行此命令，出现以下错误:

First, how exactly do I unit test ReactDOM.render call? Second, running this on Karma + PhantomJS, I get the following error:

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

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

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

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

这是因为document.getElementById("wrapper")在PhantomJS下不起作用，因为其中没有wrapper元素.

This is because document.getElementById("wrapper") will not work under PhantomJS since there is not wrapper element.

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

What's the best way to work around this? Is there anyway I can insert/mock the wrapper element just once on PhantomJS?

推荐答案

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

If there is no #wrapper element in the DOM, you have to create it and just prepare environment before running specific tests. You can use jsdom which help you in creation and maintenance of the DOM between your tests.

React具有用于编写单元测试的官方软件包，称为react-addons-test-utils.它使您可以轻松地在您选择的测试框架中测试React组件.

React has an official package for writing unit tests which is called react-addons-test-utils. It makes it easy to test React components in the testing framework of your choice.

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

More info can be found in official documentation: https://facebook.github.io/react/docs/test-utils.html

我建议您使用另一种解决方案. Airbnb发布了酶，它使编写单元测试变得非常容易. API有充分的文档记录，并且简单明了.在测试实用程序-React"文档中甚至有关于酶的信息.

I recommend you another solution. Airbnb has published Enzyme which makes writing unit tests super easy. API is very well documented and straight forward. There is even information about enzyme in Test Utilities - React documentation.

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上，您几乎可以找到每个测试框架的入门者，甚至还有一个

On Github you can find starters for almost each test framework, there is even a starter for Karma with sample repositories.

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

The last thing is if you decide to use jsdom, react-addons-test-utils, or enzyme, you don't need PhantomJS anymore because all your tests can be run just in Node.js which will make your tests also faster.

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

This is explanation what each tool gives you as a developer:

• Mocha-这是一个测试框架和一个测试运行器.
• 因果报应-它是一名测试跑步者
• 茉莉花-这是一个测试框架
• Sinon-这是一个模拟库
• ReactTestUtils-这是一个小程序包，使测试React组件更加容易
• 酶-它基于ReactTestUtils和jsdom构建，但是它提供了友好的开发人员API.使测试React组件更加容易.
• jsdom-这是一个小程序包，可在节点内部模拟Web浏览器

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

Please remember that some test frameworks like Jasmine gives you also some mocking functionalities so you don't need Sinon.

您可以将enzyme与任何测试运行器和框架一起使用. 您可以将其与Karma和Jasmine一起使用. 您可以在Mocha中使用它. 您可以将其与Jest一起使用. 有很多测试框架和测试者;)

You can use enzyme with any test runner and framework. You can use it with Karma and Jasmine. You can use it with Mocha. You can use it with Jest. There is a lot of test frameworks and runners ;)

这篇关于如何使用Karma和PhantomJS正确地对ReactDOM.render进行单元测试?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！