web-test-runner-jasmine

A Web Test Runner plugin for running Jasmine.

Setup

Import jasmineTestRunnerConfig and add to your web-test-runner.config.mjs. If using TypeScript you can add esbuildPlugin.

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

export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
  ...jasmineTestRunnerConfig(),
  testFramework: {
    config: {
      defaultTimeoutInterval: 5000
    },
  },
  nodeResolve: true,
  files: ['./src/*.spec.js'],
  browsers: [playwrightLauncher({ product: 'chromium' })],
  plugins: [esbuildPlugin({ target: 'auto', sourceMap: true })]
});

Once added you can use Jasmine within your tests.

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');
  });
});

To run your tests run web-test-runner in the terminal.

web-test-runner

TypeScript

If you use TypeScript you will need to add some additional configuiration. Update your config to read .ts extentions and add the ts: true flag to the esBuildPlugin.

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

export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
  ...
  files: ['./src/*.spec.ts'],
  plugins: [esbuildPlugin({ ts: true, json: true, target: 'auto', sourceMap: true })]
  ...
});

Ensure you have the @types/jasmine package installed and add jasmine to the types in your tsconfig.json.

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

Learn more about Web Test Runner.