If you just want to see a working example, clone this repo.
We’ll use Jest for unit tests.
When we import our modules from tests, our code is executed within Node.js’s environment. Because Jest imports our source code directly (not our Rollup-formatted bundles), it needs to know how to use Babel.
npm install --save-dev jest babel-jest
Jest will automatically use the .babelrc file in our directory.
Add this section to package.json:
Any .js file placed in a directory named __tests__/ will be executed by Jest.
Cypress is a fantastic tool to write end-to-end tests, albeit currently limited to Chrome and Electron.
One of its best feature is its documentation, which is one of the best I’ve ever used.
npm install --save-dev cypress
We will disable video recording and configure our HTTP server URL in cypress.json:
Our tests will be placed in cypress/integration/.
Out of the box, Cypress can run “headless” (from the terminal, no GUI).
However, to get it to work with CI, an additional step is required : we need to make sure it has a server to test against. Fortunately, there is an npm package for that:
npm install --save-dev start-server-and-test
Add the following scripts to package.json:
npm run test # unit and e2e tests
npm run jest # unit tests only
npm run cypress:open # e2e GUI
npm run cypress:run # e2e headless
Now that we can run tests, we can setup Continuous Integration (CI) and Continuous Deployment (CD).
As Travis automatically runs the
test script and we already took care of all the unpleasant details there, we can simply use a standard node config.
The only addition we’ll make is to cache
.cache , to prevent cypress from installing itself every time.
Hosting / CD
2 things need our attention:
- redirects (since we’re building a SPA)
- Service Worker headers
Since we’re using Netlify in our example, create a public/_headers file:
from = "/*"
to = "/index.html"
status = 200
If you have suggestions, corrections or enhancements, please tell me in the comments and I’ll update this post.