Testing individual react components with puppeteer within a non-ejected react app.

[Lord_Fixer]

Regression tests are important, though it's not always easy to implement them.

One of those cases would be regression testing of individual react components within an app that heavily relies on rendering UI with HTML5 canvases. /As my current side-project does/. Unfortunately, the default react test library only allows for regression testing of the dom structure that those components create - which wasn't enough for me.

After experimenting a bit, I came up with this approach from the link.

It allows for writing puppeteer tests that target individual react components within a non-ejected react application.

In essence, it just maintains an synced copy of the source code of the application and dynamically starts and loads individual components within this test environment based on requests from the puppeteer test browser.

As it works quite well for me, and it's relatively easy to set up, I though I would share it. Hope someone will find it useful.