Create React Application with Typescript, Enzyme, and Sass

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

Leave a Reply

Your email address will not be published. Required fields are marked *