README: Include limitations of jsdom with axe.

[NickColley]

https://twitter.com/marcysutton/status/963569635340636160

maybe could add a puppeteer example

[thibaudcolas]

Here's an example if you need it, which is setup with Jest's Puppeteer guide, in particular jest-environment-node:

import { toHaveNoViolations } from 'jest-axe';

expect.extend(toHaveNoViolations);

jest.setTimeout(10000);

describe('/', () => {
    let page;
    beforeAll(async () => {
        page = await global.BROWSER.newPage();
        await page.goto('http://www.example.com/');

        await page.addScriptTag({ path: require.resolve('axe-core') });
    });

    it('loads', async () => {
        const text = await page.evaluate(() => document.body.textContent);
        expect(text).toContain('Example');
    });

    it('a11y', async () => {
        const result = await page.evaluate(() => {
            return new Promise(resolve => {
                window.axe.run((err, results) => {
                    if (err) throw err;
                    resolve(results);
                });
            });
        });
        expect(result).toHaveNoViolations();
    });
});

The biggest difference is that aXe runs client-side after being injected onto the page. That's pretty much it!

The full setup is available here: https://github.com/springload/draftail/tree/master/tests/integration.

[NickColley]

Thanks so much :) I'll try and get this added to the docs when I get a chance.

[NickColley]

I've done a spike into adding puppeteer support into the library, if anyone is interested upvote this comment:

https://github.com/nickcolley/jest-axe/compare/spike-puppeteer?expand=1

[colinrotherham]

I think this spike would have been useful when upgrading to Jest v24? https://github.com/alphagov/govuk-frontend/pull/1277

I noticed access to global.__BROWSER__ (and other globals) was lost due to: https://jestjs.io/docs/en/24.0/configuration#globalsetup-string

Note: Any global variables that are defined through globalSetup can only be read in globalTeardown. You cannot retrieve globals defined here in your test suites.

So each tests needs to specify if it wants the puppeteer or jsdom @jest-environment to run correctly.

[donifer]

Hey @nickcolley are there any plans for getting it working with puppeteer? That would be super awesome!

[NickColley]

Heya, I don't have time to work on this feature right now and it's fairly involved sorry @donifer, I agree it would be cool though.

The spike I proposed above allows you to pass through an instance of puppeteer which means that jest-axe doesn't have to bundle puppeteer itself which would be too big of a dependency.

If enough people are interested and I get some time in the future I'll consider exploring this more, thank you for your patience.