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

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

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

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
/js/esm/sw.js
Cache-Control: no-cache
Service-Worker-Allowed: /
/js/system/sw.js
Cache-Control: no-cache
Service-Worker-Allowed: /
[[redirects]]
from = "/*"
to = "/index.html"
status = 200

--

--

Web dev — https://camillehdl.dev/

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store