How to test your own React Components library
Tags: javascript, react, tutorial, webdev
Published: 2022-08-22 07:39:31

We are going to test the components library, that we have created in [this article](https://dev.to/pavlov/how-to-create-your-own-react-components-library-2764). We have the `Button` component for testing.

We will use [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/). 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.

{% embed https://gist.github.com/alpavlove/f170179d17eb754859110137a43f223e.js %}


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. 

{% embed https://gist.github.com/alpavlove/eaa25e7c7bcccf3bcf97f134a4bfed3f.js %}


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. 

{% embed https://gist.github.com/alpavlove/ae46ae2d43ef62d502cdfba75f19ddcd.js %}

## 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`.

{% embed https://gist.github.com/alpavlove/c2dc7c5dc8f7e2c9631b1c30a6875f74.js %}

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

{% embed https://gist.github.com/alpavlove/4ec632a2344ee7e3a161ab21a45e2095.js %}

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:

{% embed https://gist.github.com/alpavlove/6e3c64e528b8b6af39b39a8b409cb8d1.js %}

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x9wp3ely6vz8n62vyf7l.png)
 
Good, I pushed it to my GitHub. You can find all tests [here](https://github.com/alpavlove/fancy-ui-reat-lib/blob/master/test/Button.test.tsx)

In the [next article](https://dev.to/pavlov/how-to-deploy-and-publish-to-npm-your-own-react-components-library-h1), we will deploy storybook to GitHub pages.