A good-but-not-great metric of how well you’re testing your is code coverage. Basically it’s how much of your code gets covered by your tests. There exist many tools to do this but we’re going to use the most common in the JavaScript world: istanbul.

What istanbul is going to do? Istanbul instruments your code to see what code gets run and then lets you when your tests are covering and/or not covering other parts. Run npm test -- --coverage.

So let’s implement that as an npm script. Add:

"cover": "npm test -- --coverage"

Now if you run npm run cover you should see 100% coverage on Search and and 66% ShowCard. That means all the exported code is getting covered in a test for Search and only 2/3 of it is for ShowCard. Yay! But where are the rest of our files? Well, we’re not testing them at all yet so istanbul doesn’t know about them. Once you start testing those files they’ll show up.

Now go to the directory of your project and open in your browser coverage/lcov/index.html. This will let explore your project and see what’s being covered in our project. If you look at ShowCard, you’ll see that we’re not covering the render method which makes sense since shallow rendering stubs ShowCard and doesn’t let it render. What this means to you, at the very least, is that outside of the render method there’s no runtime error but inside of it may be. We should add a test to test render but that’s for another time!