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

Question

Say I have the following on Index.tsx:
ReactDOM.render(
<h2 style={{textAlign: "center"}}>Hello World</h2>,
document.getElementById("wrapper")
);
First, how exactly do I unit test ReactDOM.render call? Second, running this on Karma + PhantomJS, I get the following error:
Invariant Violation:
_registerComponent(...): Target container is not a DOM element.
at /tmp/karma-typescript-bundle-192osSfGKwYIxIW.js:188
This is because document.getElementById("wrapper") will not work under PhantomJS since there is not wrapper element.
What's the best way to work around this? Is there anyway I can insert/mock the wrapper element just once on PhantomJS?

Answer 1

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 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.
More info can be found in official documentation: https://facebook.github.io/react/docs/test-utils.html
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/
On Github you can find starters for almost each test framework, there is even a starter for Karma with sample repositories.
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 - It's a test framework and a test runner.
Karma - It's a test runner
Jasmine - It's a test framework
Sinon - It's a mocking library
ReactTestUtils - It's a small package which makes testing React components more easier
Enzyme - It's built on top of ReactTestUtils and jsdom but it provides friendly developer API. Makes testing React component more easier.
jsdom - It's a small package which emulates web browser inside node
Please remember that some test frameworks like Jasmine gives you also some mocking functionalities so you don't need Sinon.
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 ;)