Testing Blazor with Jest and Puppeteer

In my first blog post on Blazor, I talked about sharing models between both Blazor and the API projects. In this blog post, here’s the bare minimum to get started testing Blazor website with Jest.

Jest is a library for “Delightful JavaScript Testing” and a very well regarded tool. I’m combining it with puppeteer, “Headless Chrome Node API”, via jest-puppeteer, which just so also happens to contain jest-dev-server.


I have three files in the root of my repository.

/// package.json
  "name": "blazorexample",
  "private": true,
  "dependencies": {},
  "devDependencies": {
    "puppeteer": "^1.10.0",
    "jest": "^23.6.0",
    "jest-puppeteer": "^3.5.1"
  "scripts": {
    "test": "jest test"
  "license": "MIT"

/// jest-puppeteer.config.js
module.exports = {
    launch: {
      dumpio: true,
      headless: process.env.HEADLESS !== 'false',
    server: {
      command: 'dotnet run --project Blazor.Client',
      port: 5000,
    browserContext: 'default',

Do note that the above config tells the Blazor project to run via dotnet. A more effective solution might be to generate the final static assests and test those directly.

/// jest.config.js
module.exports = {
    verbose: true,
    "preset": "jest-puppeteer"


I also have a folder named ”__tests__” with just one file (so far).

/// main-tests.js
describe('Blazor', () => {
    beforeAll(async () => {
        await page.goto('http:localhost:5000', { waitUntil : 'networkidle0' } );

    it('should display "Hello, world!" text on page', async () => {
        await expect(page).toMatch('Hello, world!');

    it('should navigate to counter page', async () => {
        await page.click('a[href=counter]');
        await expect(page).toMatch('Current count: 0');

        await page.click('button.btn');
        await expect(page).toMatch('Current count: 1');

Running Test

Command “npm run test”.

PS C:\Users\Daniel\Development\BlazorExample> npm run test

> blazorexample@ test C:\Users\Daniel\Development\BlazorExample
> jest test

Determining test suites to run...[1125/025722.949:ERROR:gpu_process_transport_factory.cc(967)] Lost UI shared context.

DevTools listening on ws://
[1125/025726.858:INFO:CONSOLE(1)] "WASM: Initialized", source: http://localhost:5000/_framework/blazor.webassembly.js (1)
 PASS  __tests__/main-tests.js
    √ should display "Hello, world!" text on page (7ms)
    √ should navigate to counter page (72ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        2.892s, estimated 3s
Ran all test suites matching /test/i.


No web project of any kind is complete without being able to browser testing.

My code is here. My previous blog post on Blazor is here.