Test with Storybook

First of all, we need to set test.tsx component that we want to apply to our component.

So this is a normal test libray setting in React. But we want to use this with our Storybook setting. Its easy to apply first we can just add our Storybook component in test component.

After we made this, we can check test library.

Test command is also easy. Only thing you need to do is just type this.

But, for better Test experience we need to add some lines in package.json.

Just add upper code inside in your package.json. All this code mean that ㅜot testing unnecessary elements like node modules, and stories.

And also i want to add some new script

and after this you can run yarn test:coverage . Then we can see like this.

But you can see that our test element is not fill 100%.

So let’s fix that.

First we need to check index.html that in Coverage folder. I will express the position in a tree structure.

in there you can see what we miss.

we can easily find that we miss sm and lg type button. So let’s add that in our Button.test.tsx.

If we test after this we can find that we pass all test element.

If you want to test specific style customized then you can add other test option like below.

with expectmethod inside of test you can define what we want to test in the component.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store