Month: May 2020

Create React Application with Typescript, Enzyme, and Sass

IainLeave a comment

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 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:

1
2
3
4
5
6
7
// 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:

1
2
3
// 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