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.
Top comments (0)