I’m on a team that loves Typescript and React. Their code is manually tested. I prefer to write my tests first.
The following process addresses the problem of respecting an existing approach to app development, while respecting my own standard of professional practice.
This is how I introduced my behavioural testing approach to a project bootstrapped with
create-react-app. It equips me to write automated tests while allowing my teamates their own approach.
As per the docs, the following produces the base application:
create-react-app comes with a few baked-in
npm scripts. There are two existing build scripts:
npm run build and
npm start. The first only produces production builds. The latter only produces transient development builds (i.e., you can’t save them for later).
I need to produce test builds, so I add this to this to the
scripts section in
create-react-app does a lot of crazy-cool stuff with
.env files. I don’t think what follows will respect the
dotenv-expand features that allows you to cascade build configurations according to environment.
With that it mind, install
I want a test build, so I need a
.env.test file. Configurations, of course, are app dependent. The following is one likely example:
To create your test build, execute:
You’ll see a message that says:
react-scripts build only produces a production build. Is it still creating a production build, or is it reading my
This is the perfect opportunity to test if this test build configuration is working…
None of this requires testing with
zombie, but I like testing with this pair because I’m old-fashioned and lazy. Install and initialize:
NOTE: I’m purposefully skipping adding
typescript support to
jasmine for the moment. I may revisit this in the future.
I need to determine if the values I set in
.env.test are being baked into the test build configured above.
Here’s my first test, which I place in
If you look closely at the above file, you’ll see this test needs its own server to run (
npm start only does a development build). Paste the following into
morgan to see the server output:
Add another line in the
package.json (i.e., the
e2e line right below the
build:test line already configured):
The tests should now execute with one failing test:
The test defined above is simply checking to see if a link is created from the values stored in the
.env.test file. Add that link to
Execute the test:
This configuration doesn’t currently respect the neat
dotenv-expand features that come baked into
As noted above,
jasmine is not currently configured to support