These tests use NO CODE | component testing in Storybook

Рет қаралды 9,919

Күн бұрын

Nobody likes writing tests. But what if you could right all your tests just by rendering components in the browser? With Storybook, you can. Learn how to get 100% test coverage with the stories you've already got… Learn with ‪@chantastic‬
▬ Chapters ▬▬▬▬▬▬▬▬▬▬
00:00:00 Get free tests with Storybook
00:00:24 Use Stories as Jest test cases
00:00:48 Install @storybook/test-runner
00:01:21 Add Jest expectations
00:02:31 Add style tests
00:02:55 Add component tests to interactive stories
00:04:02 Learn more about component testing in Storybook…
▬ Links and resources ▬▬▬▬▬▬▬▬▬▬
- Storybook Test Runner: storybook.js.org/addons/@stor...
- Storybook play functions: storybook.js.org/docs/react/w...
- Storybook interaction tests: storybook.js.org/docs/react/w...
▬ Follow us! ▬▬▬▬▬▬▬▬▬▬
Discord: / discord
Twitter: / storybookjs
GitHub: github.com/storybookjs/storybook
Follow ‪@chantastic‬ on:
- twitter: / chantastic
- youtube: ‪@chantastic‬
▬ Learn more ▬▬▬▬▬▬▬▬▬▬
- Storybook at learnstorybook.com/
- Storybook addons at storybook.js.org/addons
- Component driven UI development at www.componentdriven.org/
▬ Free Storybook hosting ▬▬▬▬▬▬▬▬▬▬
Chromatic is made by Storybook maintainers and sets up in just 2 minutes.
Claim free Storybook hosting at www.chromatic.com/!

Пікірлер: 20

@kevincoyle7704 Жыл бұрын

This. Changes. Everything! :D Really excited to use this

@chantastic Жыл бұрын

heck yeah! me too :)

@jamesgarcia1538 Жыл бұрын

This is amazing! Thanks for sharing :)

@chantastic Жыл бұрын

Thanks for the encouragement James!

@dominicnguyen5465 Жыл бұрын

Haha "Stabbing your components with a blindfold on" ❤

@eduardoalvarez4457 3 ай бұрын

In case someone just came from the documentation using TypeScript and get errors everywhere, remember to rename your story from component.stories.ts to component.stories.tsx (notice the x at the end) as the decorator is JSX and its required for the TypeScript compiler to be valid.

@gokhankoc3507 Жыл бұрын

I have been using interactions for a while at work and love them. Now I believe there needs to be further documentation for testing strategies, patterns and examples. For example, to be able to test actions (they will be automatically jest.fn() mocks), they need to be defined in argTypes. It took hours for me to figure that out. Is there any way I can contribute?

@chantastic Жыл бұрын

have you had a chance to look at the test-runner documentation? there are a number of recipes there. a number of our posts and videos are just resurfacing the documentation there github.com/storybookjs/test-runner#setting-up-code-coverage

@chantastic Жыл бұрын

and yeah! we're always open to contributions. the test-runner docs (linked in the other comment) are the best place to make contributions. this particular package is under a lot of active development

@kabburebh Жыл бұрын

These tests can show the coverage in sonar as well?

@chromaticui Жыл бұрын

We have a doc that covers integration with Istanbul. None for sonar yet. But the Istanbul docs may provide some general guidance storybook.js.org/docs/react/writing-tests/test-coverage

@SithLordBishop 9 ай бұрын

does this work with vitest?

@chromaticui 9 ай бұрын

sadly no

@xennialmusic Жыл бұрын

I'm in the Storybook Discord channel and I can't find the testing channel you speak of at the end of the video.

@chromaticui Жыл бұрын

discord.com/channels/486522875931656193/691505730125168682

@justingiovanetti 19 күн бұрын

“With no test code”? You showed the test code.

@sebastianthomas1901 2 ай бұрын

"Get free tests with just two lines!". Proceeds to write tests. So sick of these hype men talking nonsense and selling lies

@Thr0nSK Жыл бұрын

Any idea why I'm getting a type error `TS2339: Property 'toHaveStyle' does not exist on type 'JestMatchers '.` with the `toHaveStyle` method?

@chromaticui Жыл бұрын

stackoverflow.com/questions/38324949/error-ts2339-property-x-does-not-exist-on-type-y

@Thr0nSK 11 ай бұрын

@@chromaticui Sorry but I'm not sure how this helps. I shouldn't need to extend the type, should I? I saw that other people had problems with this as well and solved it by adding @types/testing-library__jest-dom but it doesn't seem to help in my case.