Rules for testing React UI component with Enzyme

You should always write test for your code.

All the examples below will be using Mocha, Chai, you should be able to change to whatever library you like.

Common rules for test

First of all, you should give your test suit a good name, I prefer prefix you suite name with your module type and followed by the moudue name, for example:

Secondly, give a specific description for each test case, use word “should” at the beginning to describe the expected behavior, like:

Test for component

Use enzyme to shallow render components in test cases. You should read about its API: shallow, mount and Enzyme Selectors

Notice the example uses { 'data-ref': 'listItem' } as the Enzyme Selector. data-ref is a convention attribute name I use to refer certain element for test:

You should avoid using Component class as the enzyme selector, which couples your test cases to a certain implementation, bellow is a bad example:

Tricks for shallow and mount

The difference between shallow() and mount() is that mount() renders your component into real dom tree, shallow() only create a shallow render tree.

For shallow rendered elements:

You can use simulate() to simulate event for shallow rendered element, but you need to provide event object by yourself:

The event does not propagate, you do not expect simulating a click event on one element will trigger some event else, in most of the cases you should simulate event you need directly:

Another thing you need to notice is that you are not able to select a nested component directly with shallow rendered element.

For example, you created a component Toolbar

Then you created another component using Toolbar:

Now in your test you will not be able to get all the “toolItem” directly:

The reason it will fail is that shallow() only render one level of the component, like:

If you need to go deep further, you need to get Toolbar first and call shallow() to shallow render it:

For Mount rendered elements:

You can use simulate() to simulate event for Mount rendered element, it will be just a normal DOM event, and you can only simulate a normal DOM event, like:

The difference here between shallow() is you don’t need to provide event object by yourself and the event can propagate.

Since you are dealing with a whole complete dom tree, you can search for nested element directly:

But when you try to get your target’s properties or use property selector it may fail because the final rendered dom tree may not contain the property it has in a shallow tree, for example:

You have a simple Tip component:

Then you created another one for ResultSuccess:

You will fail to get the tip element by using the selector { 'data-ref': 'tip' }, since, for the final dom three, it is like this:

Test for callbacks

Use Sinon for callback tests.

Test if the callback is called:

Test if the callback is called with certain args:

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.