React JS Component Testing with Storybook 7 Typescript

In this video we learn how to setup and write interaction tests with storybook and React JS! This is a follow up to my last video where we learned how to set up a vite react and typescript project along with storybook.

Think of interaction tests as a more powerful version of unit tests which run directly on the browser along side your storybook stories. I'll also show you how you can use the interactive debugger to step through your tests line by line! Finally we will also cover how you can fully automate running your tests for CI/CD.

[konstantinosgallis]

Nice video Marius!
I have a question.
Can the interaction tests replace the unit tests?
For example, if I have a Button ("Button.tsx") component, can I test its functionality to the stories file ("Button.stories.tsx") instead of creating a new test file ("Button.test.tsx") for it?

[slemchik]

Great video! But, can i use test() or it() functions like in vanilla jest testing inside my play() function?

[MarkKhotin-gr]

Thanks for the video! Great explanation!
Only one question: how can I access theme object inside the 'play' function (I'm using withThemeFromJSXProvider)? For example in order to test that some css property of the component is equal to the value from the theme?

[beunmin]

I just used the setup you did though I used NextJS13, storybook and test runner but now it's not detecting test on the interaction test. Do you have a github example of this?

[TiagoMartinho-qt]

Hey, nice video :p. I have a question. We have a component that is an expandable section, and we are creating a story to test when the open button is clicked, the content appears. So far, everything is fine, the test works. However, in the documentation, the expandable section will be closed because the test doesn't run there. If I pass the initial value to have it open in the documentation, it looks good, but the test stops working. Is there a way to work around this?

[ЕвгенийГончаров-ъя]

Could you help me please? I don't understand, if there is no props in my component, I can't do anything in stories. Sorry if this is a dumb question, I've been learning programming for a few months. But, for example, I have a simple counter and a button that changes the number. The component counter only passes the date to the button(increment, button makes counter 0). What stories can I create for this component

[techknowledgebase]

How userEvent.hover work? All uptodate still not seeing hover trigger.

[bonarhyme]

I get this error:

ambiguous indirect export: within

Anytime, I import within function from @storybook/testing-react