## Intro

After [Loki.js](https://loki.js.org/) served us well for some years we finally converted our **Visual Regression Testing**** logic to use the [Storybook Test Runner](https://github.com/storybookjs/test-runner).

The benefits:
- it's **way** faster
- it has better official support
- it does _more_ (component smoke tests, `play` tests, extensibility for more like a11y tests)
- it's **way** more stable (actually it looks like there is not a _single_ flaky test right now 🤯)

But the setup might be non-trivial and there are some rough edges. The biggest downside: while it is way faster it could be even more faster, if we could just use generate images against the Storybook Dev Server. Sadly this was _very_ flaky and error boundaries would always fail (I assume this is because of Reacts unfortunate decision to re-throw errors in _Dev Mode_). See also [this issue](https://github.com/storybookjs/test-runner/issues/218).

What I do now in order to generate images locally is a custom "production" build (without minification and optimization and just the stories that I actually want to test visually).

The other tricky part was the Playwright setup. In order to get the same results across machines we want to run Playwright in a Docker container. For various reasons I decided to use the Network API of Playwright. That means I'll _only_ run Playwright in the Docker container, but I keep my running Storybook instance on the host. (At least in the local setup. Within the Gitlab CI we run everything inside Docker.)

As a general note: We have a lot of stories in Storybook, but we only want to take images of stories that are inside a `components/` directory.

## `package.json`

...

## `test-runner-jest.config.js`

..

## `.storybook/main.ts`

..