Cory Rylan

My name is . Google Developer Expert, speaker, Software Developer and Web Components enthusiast.

Follow @coryrylan
Modern Web

Testing with Jasmine and Web Test Runner

Cory Rylan

- 1 minute

Updated

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!

View Demo Code on Github   
 

No spam. Short occasional updates on Web Development articles, videos, and new courses in your inbox.

Related Posts

Modern Web

Testing Screen Readers with Web Test Runner Voiceover

Learn how to test screen readers using VoiceOver on Mac and the web-test-runner-voiceover package.

Read Article
Modern Web

Testing Screen Readers with Web Test Runner Voiceover

Learn how to test screen readers using VoiceOver on Mac and the web-test-runner-voiceover package.

Read Article
Web Performance

Testing Web Performance with Web Test Runner

Learn how to test both render and bundle performance using Web Test Runner and the Web Test Runner Performance library.

Read Article