The journey of building React Screenshot test

In order to understand how the internal architecture of React Screenshot Test came about, let’s rewind a bit.

The original idea was simple: what if we could write tests for React components that looked almost like snapshot tests, but compared actual screenshots instead of HTML?

This generates the following snapshot of the rendered HTML:

Instead, I wanted it to generate a screenshot:

It turns out, generating a screenshot from a React component isn’t as straightforward as I’d hoped.

Now, what about the HTML? If you’re familiar with server-side rendering, you may already have the answer: use ReactDomServer.renderToString()! Indeed, that's exactly what I used.

I decided to spin up a local server (called the “component server”), which would use server-side rendering to serve the HTML. Each “node” (a React component with a specific set of props) would be allocated a random ID, and therefore a unique URL. For example, /render/abc-123 may show our wonderful Facebook link above.

With this local server, taking a screenshot was straightforward:

All done!

Well, not exactly. Much to my dismay, as soon as I set up React Screenshot Test on CircleCI, tests failed. There was a small (2%) visual diff between the screenshots I had generated on my MacBook Pro, and the ones being generated by CircleCI.

One option would have been to say “always run your tests within Docker, otherwise you’ll have a bad time™”. However, that wouldn’t have been a great developer experience. What if React Screenshot Test seamlessly ran a browser within Docker for you?

This made things a bit more complicated. If the browser is running in Docker, but the tests are running on the host machine, you can’t simply use Puppeteer’s API to control the browser anymore. They’re effectively running on different machines.

What’s a good way to communicate between different machines? HTTP, of course!

This led to a new abstraction: the “screenshot server”. It’s an HTTP server with a single endpoint:

Then, I updated the screenshot logic to talk to the screenshot server instead of using Puppeteer directly.

Did that work?

Why run Docker inside Docker anyway? This was an unnecessary level of nesting. Summarising:

Another constraint came about from the way that Jest works.

In order to run tests in parallel, Jest spins up multiple Node processes. Because they are separate processes, they cannot share memory. In particular, they cannot share access to a Puppeteer instance. This isn’t ideal for resource sharing: launching a new Chrome binary for each test file doesn’t scale very well!

Now, what if we started a single screenshot server before our tests? Since it’s an HTTP server, all Node processes could talk to it, as long as they know its port.

The solution, which may seem a bit convoluted at first, was to:

This is how React Screenshot Test came about.

Related posts:

So if you want to stand out in a world where over 4 million posts are published every single day, we’ve prepared a list of five best practices for content creation and management. It’s tremendously…

When was the last time you let yourself dream about what it is you truly desire for your life? When was the last time you wrote down your greatest visions for your life and really let yourself focus…

To start with competitive programming, the first thing you will need is a programming language. As there are a lot of programming languages available, it is quite difficult to choose one as a…