How to test your own React Components library

We are going to test the components library, that we have created in this article. We have the Button component for testing.

We will use React Testing Library. To install it, run this script

yarn add -D @testing-library/react

If you use CSS files

As you may know from a previous article, we use a CSS file to add styles to our button, but Jest can't handle such files by default and tests will fail. To run tests, we need to mock CSS files first.

To do that, add a jest.config.js file to the root of your project and paste a code below, it says that all CSS files should be handled by identity-obj-proxy library

module.exports = {
  moduleNameMapper: {
    '\\.(css)$': 'identity-obj-proxy',
  },
};

and run

yarn add -D identity-obj-proxy

Well, now we can start writing tests

Writing tests

Firstly, we have to decide that exactly we want to test. Let's check if the button is rendered correctly in different states and if it is clickable/not clickable. So we create a template and comment that we don't need for now.

For the first test, we need to import a render function from React Testing Library. We will check if default button has a primary variant. There are few ways to do it. For the first one, we need a function of searching element in the screen, let's import an object screen, that contains the function we need.

The next one is to test a success variant. Let's have a look at another way of implementing such test. We will find our button by querySelector function.

Snapshot test

For disabled button state, let's use a snapshot test - the third way of implementing this type of tests. For that, we need an asFragment function, that we get from render.

After running the test, Jest will generate a snapshot and paste it to our test as a toMatchInlineSnapshot function argument:

Next time we will run the test, Jest will compare a result of asFragment function with this snapshot. Every time we create a new snapshot, we need to check that it meets our expectations.

Move on, now we will check if button is clickable. For that, we will mock onClick function and pass it to our button, then, emulate on button click with fireEvent.click. In the end, check that click was done, and it was done 1 time.

For testing a disabled button state, we will do the same, but use expect().not.toHaveBeenCalled() to be sure that click wasn't done. See example below:

I will run all tests one more time to be sure that all is fine

Good, I pushed it to my GitHub. You can find all tests here

In the next article, we will deploy storybook to GitHub pages.