Tdd

Running Visual Regression Tests with Storybook and Playwright for Free

Storybook’s visual regression testing tool Chromatic is powerful but expensive. Luckily, with tools like Playwright, we can build a free alternative for running visual regression tests on our UI components. In this article, we’ll explore how to integrate Playwright with Storybook and use Docker to ensure consistent test results across different machines and CI environments.

Read more

Using Testing Library jest-dom with Vitest

Vite brought super fast bundling and hot reloading to our regular dev workflow, and Vitest is doing the same for our testing workflow. So I'm mostly transitioning away from Jest in favor of Vitest. But there are a lot of amazing tools in the Jest ecosystem, and not of them can be easily replaced. Luckily, the Vitest API is mostly compatible with the Jest API...

Read more

Test Smarter, Not Harder: Focus on Outcomes, Not Outputs

When we dive into the world of testing in programming, it's easy to get caught up in the numbers game—how many tests have we written? What's our code coverage? However, if we pause and consider the bigger picture, we realize that the true measure of success isn't the output; it's the outcome...

Read more

Using Mock Service Worker with Vitest and fetch

The JavaScript ecosystem has a lot to offer when it comes to testing. With the recent addition of Vitest we get the performance and convenience features of Vite for testing too. Mock Service Worker is an excellent mocking solution for mocking network requests in the browser and Node.js...

Read more

Manual testing, E2E testing, unit testing – how to decide which testing strategy to use?

When we first start to dip our toes into the deep waters of automated software testing, all those different kinds of tests can feel intimidating. In this article, I give you a quick overview of the most crucial testing strategies. After reading this tutorial, you should have a much clearer picture of the strengths and weaknesses of the different kinds of testing methodologies...

Read more

Cypress Live-Reload Tests on Code Changes

Out of the box, Cypress offers an amazing live-reloading feature. But there is one caveat: live-reloading only works when changing test code, not when updating the application code. Nowadays, we are used to live-reloading in the browser thanks to webpack hot module replacement (HMR) and other fantastic development tools like Vite or Snowpack. If we had something similar in Cypress, practicing TDD would be a lot easier...

Read more