Custom Jest Config: Lottie + Typescript in CRA 2
Published in
1 min readFeb 4, 2019
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
- 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 🙌
Originally published by one of SovTech’s Full Stack Developer, Jonathan Irwin.