Test Runner: Getting Started

Testing your code is very important to have the confidence to release often. Green tests should mean that the change is good to go 👍

Writing my first test

We plan to write a utility function sum which sums up 2 parameters. We start by defining on what we expect the code to do.

it('sums up 2 numbers', () => {
  expect(sum(1, 1)).to.equal(2);
  expect(sum(3, 12)).to.equal(15);
});

👆 We make sure 1 + 1 equals 2 and 3 + 12 equals 15

Now that we know what we want we need to place this file somewhere and run a tool to execute this code in the browser automatically.

Setup tools

1. Install the necessary packages

   npm i --save-dev @web/test-runner @esm-bundle/chai
   

2. Add a script to your package.json

   {
     "scripts": {
       "test": "web-test-runner \"test/**/*.test.js\" --node-resolve"
     }
   }
   

With that we can now execute

npm run test

which results in the following output

$ web-test-runner "test/**/*.test.js" --node-resolve
Could not find any files with pattern(s): test/**/*.test.js

fair enough - we didn't create a test file yet.

Make it work

1. Take the spec/test from above and create a test file test/sum.test.js.

   import { expect } from '@esm-bundle/chai';
   import { sum } from '../src/sum.js';
   
   it('sums up 2 numbers', () => {
     expect(sum(1, 1)).to.equal(2);
     expect(sum(3, 12)).to.equal(15);
   });
   

   We also added the necessary imports

2. Run it

   $ npm run test
   $ web-test-runner test/**/*.test.js --node-resolve
   
   test/sum.test.js:
   
   🚧 404 network requests:
       - demo/guides/test-runner-getting-started/src/sum.js
   
   ❌ TypeError: Failed to fetch dynamically imported module: http://localhost:9685/demo/guides/test-runner-getting-started/test/sum.test.js
   
   Chrome: |██████████████████████████████| 1/1 test files | 0 passed, 0 failed
   

   => this is what we expected

3. Create the src file src/sum.js

   export function sum(a, b) {}
   

   We will make sure to test if it fails correctly.

   $ npm run test
   $ web-test-runner test/**/*.test.js --node-resolve
   
   test/sum.test.js:
   
   ❌ sums up 2 numbers
         AssertionError: expected undefined to equal 2
           at n.<anonymous> (test/sum.test.js:5:24)
   
   Chrome: |██████████████████████████████| 1/1 test files | 0 passed, 1 failed
   

   => fails correctly

4. Fix it

   export function sum(a, b) {
     return a + b;
   }
   

   $ web-test-runner test/**/*.test.js --node-resolve
   
   Chrome: |██████████████████████████████| 1/1 test files | 1 passed, 0 failed
   
   Finished running tests in 0.9s, all tests passed! 🎉
   

   Mission accomplished 💪

Learn more

All the code is available on github. See the documentation of @web/test-runner.