Props are passed into the component at line 4, we have some dynamic CSS on line 6 and we export on line 14. Very straightforward.

AccountListItem.test.js

Now let’s take a look at our test file. For more detail on how Jets identifies test files within your project, checkout the Jest docs or my article from the top of this post.

AccountListItem.test.js

So here we import our component at line 2 and react-test-renderer at line 3. We build some test props on lines 5–15 and our test begins on 17. This test is very basic, the most interesting part is line 21 where we export our component snapshot.

The snapshot creates an actual file in your project. These files should be committed alongside your code and should be included in pull requests.

Here is the file tree and the actual snapshot file that react-test-render spit out:

jest created snapshot dir and file

AccountListItem.test.js.snap

When the test runs for the first time, this file is created. When the test is run in subsequent test executions, the output is compared to the snapshot. If it does not match, then either Jest just found a bug in your code OR the implementation has changed and the test needs to be updated.

If Jest found a bug, then you need to examine the logic that changed. If the implementation changed and the test needs to be updated, you need to run: jest — updateSnapshot. This will take updated snapshots of ALL of your failing component tests.

Jest will also warn you if you have obsolete(duplicate or old) snapshots and you can easily delete them from the terminal simply by typing u when prompted.

Events

The test above is very simple, no events involved. If you wanted to say test a hover event for proper CSS, you could simulate the hover by adding the following line: tree.props.onMouseEnter();

I added this as an afterthought, just to give you the gist of how you may add DOM eventing to your tests. Insert your event here, its that simple.