Testing with Jasmine and Web Test Runner

The @web/test-runner package from modern-web.dev is a fast and modern test runner for unit testing. Out of the box @web/test-runner supports running modern ESM unit tests with @esm-bundle/chai or @web/test-runner-mocha.

import { expect } from '@esm-bundle/chai';

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

While @web/test-runner provides a fast testing experience out of the box. By using native ESM (EcmaScript Modules), the test executes fast and reliably. However, you may want or need to use a different testing library other than chai or mocha. Luckily @web/test-runner has a flexible plugin API that can add additional plugins or test runners for other types of testing libraries.

Using the web-test-runner-jasmine package, we can use Jasmine tests with @web/test-runner. To start, we need to create a basic web-test-runner.config.mjs to configure our test setup.

import { playwrightLauncher } from '@web/test-runner-playwright';
import { esbuildPlugin } from '@web/dev-server-esbuild';
import { jasmineTestRunnerConfig } from 'web-test-runner-jasmine';

export default ({
  ...jasmineTestRunnerConfig(),
  testFramework: {
    config: {
      timeout: 10000
    },
  },
  nodeResolve: true,
  files: ['./src/*.spec.ts'],
  browsers: [playwrightLauncher({ product: 'chromium' })],
  plugins: [esbuildPlugin({ ts: true, json: true, target: 'auto', sourceMap: true })]
});

The jasmineTestRunnerConfig function provides a config object to set up the work needed to run Jasmine in the test runner. You can configure options like test timeout limits using the testFramework option in your configuration.

If you are using TypeScript, you will want to install the @types/jasmine types package and add jasmine to the types in your tsconfig.json.

{
  "compilerOptions": {
    ...
    "types": ["jasmine"],
    ...
  }
}

Once set up, you can now start creating your Jasmine specs.

describe('a test suite', () => {
  let element: HTMLElement;

  beforeEach(() => {
    element = document.createElement('p');
    element.innerHTML = 'hello there';
  });

  afterEach(() => {
    element.remove();
  });

  it('should create element', () => {
    expect(element.innerHTML).toBe('hello there');
  });
});

Then run the following to execute your test suite:

web-test-runner

Web Test Runner and its corresponding project Web Dev Server are fantastic tools for modern and fast Web development. Check out the repo with working examples below!