This is a continuation of Getting started w/ React & Mocha blog post. Here I’ll shortly describe one more alternative how to test a React component.
Code for this example can be found on GitHub. After downloading the code, run
or this gulp command:
If you are using Visual Studio Code - you can build it using
⇧⌘B (on Mac).
So I have this react component, named VeryFirstDiv:
In my previous post to test it I was creating fake DOM using JSDOM library and then rendering my testable component into this fake DOM (Read more about it here).
Shallow rendering is an experimental feature that lets you render a component “one level deep” and assert facts about what its render method returns, without worrying about the behavior of child components, which are not instantiated or rendered. This does not require a DOM.
In my test I create an instance of Shallow Renderer:
let renderer = ReactTestUtils.createRenderer();
Then, render my VeryFirstDiv component using this renderer
and get the output:
myDiv = renderer.getRenderOutput();
At this point you can check anything you fancy. I’ll for example want to test whether it is of a type ‘div’ and does it have a class named “veryFirstDiv” Here’s my test:
For a comparison, I’ve created same test as in using DOM version:
Testing using Shallow Rendering is faster. You can even notice it on this small example: my test using fake DOM runs for ~50ms, while using Shallow Rendering test takes only 10ms. I believe the gain is even more significant on big projects. And as a pleasant side effect it doesn’t require additional libraries.