Series: Blazor

Blazor: C# in the browser - November 24, 2018
Testing Blazor with Jest and Puppeteer - November 25, 2018
Static Blazor in NGINX - November 25, 2018

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.

Configuration

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"
};

Tests

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://127.0.0.1:60645/devtools/browser/2006141f-87e1-4d19-ab8c-bd56f1d0d823
[1125/025726.858:INFO:CONSOLE(1)] "WASM: Initialized", source: http://localhost:5000/_framework/blazor.webassembly.js (1)
 PASS  __tests__/main-tests.js
  Blazor
    √ 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.