Rollup-based dev environment for JavaScript (part 3: testing, CI/CD)

This is the third part of my Rollup dev environment guide.
In this article we will get Jest to play nice with Babel, write Cypress tests and setup CI (Travis) / CD (Netlify).

If you just want to see a working example, clone this repo.

Jest

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

Cypress is a fantastic tool to write end-to-end tests, albeit currently limited to Chrome and Electron.
Tests are written in plain JavaScript and use a Promise-based API.
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

Running tests

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).

CI

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:

/js/esm/sw.js
    Cache-Control: no-cache
    Service-Worker-Allowed: /
/js/system/sw.js
    Cache-Control: no-cache
    Service-Worker-Allowed: /

and netlify.toml:

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

See how our app looks so far (branch for this post).

If you have suggestions, corrections or enhancements, please tell me in the comments and I’ll update this post.