Tilted sphere with longitudinal stripes Modern Web Guides Docs Blog

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.