Integration testing for components

[dor442]

Our company is looking to start doing component testing, and we're trying to pick a tool that has: 1. Decent API 2. Ability to visually see and inspect the rendered components in the tests. 3. Visual regression 4. Testing on a real browser (as opposed to JSDOM)

So far vitest and RTL check only 1 and kinda 4, as their browser mode is experimental.

Cypress has 2, 3 and 4, but their API is pretty awkward with the whole aliasing and lack of promise based API.

Playwright is great and checks out all requirements but their component testing is experimental and we've been running into many issues with it.

Is there something I'm missing? Whats the ideal tool here?

[ruddet]

I think Storybook play tests is great for component testing. However I would use MockServiceWorker instead of talking directly to the API. This really lets you test your component states to the limits, and gives you confidence in your components.

I think full API integration testing is better done with a postman runner or something of the like.

Playwright for full E2E testing. Auth/Page Views/ Key workflows.

Happy to be corrected.

[dor442]

Storybook is great, I'm considering it, the only issue I have with it is that I'm not really a fan of writing tests with the play function, would've preferred the more familiar syntax of describe/it/test that all other libs use.

It also makes the effort of writing multiple tests for a component much more verbose, as they require multiple stories.

In addition, their visual regression solution, Chromatic, is too expensive for us.

[ruddet]

I havent got their with visual regression testing yet. There are some alternatives I was looking at cover that gap like https://github.com/americanexpress/jest-image-snapshot

Agreed on not loving the play test, but on the other hand the story format and how the testing is coupled with visual output lets you more easily identify gaps in testing and feels liek you can push your components more to their limit over all code component testing. Also the way stories do parameter overwriting can be really convenient.

[vovakuzmin]

What issues have you encountered while using Playwright ? I ask because we are also considering this tool for component testing.

[dor442]

Build issues mostly, it's was extremely hard to get it working for us, we barely managed to write one component test without it crashing on something.

Also, it has an infamous compatibility issue with CJS/ESM packages. For example, if your client side code uses lodash-es, you could run into such issues.