Custom Jest Config: Lottie + Typescript in CRA 2

Photo by John Purakal on Unsplash

Start up a new project with Create React App (CRA) 2, add some TS components and yay it all works out the box! 🙌 … Add some Lottie and you will likely hit a wall where you want more control over the jest config.

Do you eject? NO! To the rescue: Rescripts 🎉

Here’s how to make it happen

1. Install rescripts:

yarn add @rescripts/cli -D

2. Update your package.json scripts:

...
"scripts": {
-   "start": "react-scripts start",
+   "start": "rescripts start",
-   "build": "react-scripts build",
+   "build": "rescripts build",
-   "test": "react-scripts test",
+   "test": "rescripts test",
-   "eject": "react-scripts eject"
},
...

3. Add .rescriptsrc.js to the root of your project:

module.exports = [
  {
    jest: config => {
      config.setupFiles = ['jest-canvas-mock'];
      return config;
    },
  },
];

• note you can include any jest config you need — the above is just what I required to get jest to play nice with lottie.

And we are done! Run yarn test to kick things off 🙌