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