This is just a set of notes on what was required to set up this combination of packages in create-react-app (CRA).
In your preferred shell for working with node:
// Shell/Console/Command Line # create CRA application with typescript npx create-react-app context-example-application --template typescript # Update an fuzzily matched dependencies npm update # commit any updated dependencies git commit -m "Update dependencies" # List other outdated dependencies. To actually update, one will need to edit # package.json to enter the new versions. npm outdated ... # Install dependencies whose versions we've changed npm install # commit the updated dependencies git commit -m "Update dependencies" # commit changes # Add Enzyme npm install enzyme enzyme-adapter-react-16 @types/enzyme @types/enzyme-adapter-react-16 jest-enzyme
To avoid some repetitive configuration in each test file, one can add the imports and setup for Enzyme to setupTests.ts
:
// setupTests.ts ... import {configure} from 'enzyme' import Adapter from 'enzyme-adapter-react-16' import 'jest-enzyme' configure({adapter: new Adapter()})
I briefly considered adding import {shallow, mount, render}
from ‘enzyme’ as well, but it felt like a bridge too far, since I’d potentially be importing more than was needed for a given file. So I landed on doing that import in the individual files.
Installing sass is easy:
// Shell/Console/Command Line npm install sass
That installs sass which is a node wrapper around Dart sass. There’s potential pitfalls with the other options (dart-sass, node-sass). Carter Bancroft makes some compelling arguments for using this node library over the others: https://carterbancroft.com/sass-and-webpack/
There’s an example application of this setup on GitHub at: https://github.com/iain-davis/create-react-app-typescript-with-enzyme-sass