Run axe-core tests in a Create-React-App test suite

Question

Is there a way that I can run axe-core within my create-react-app tests? Which uses Jest.

I know, I could use something like react-axe but it looks like that just outputs to a chrome console, and I'm trying to get the results to be apart of my tests.

I've installed axe-core and tried creating a simple test but it doesn't seem to be doing anything.

it('should render with no accessibility issues', (done) => {
  axe.run(document, function(err, results) {
    expect(results.violations.length).toBe(0);
    done();
  })
});

Running this I always get 4 errors, I'm guessing because document is completely empty.

1. Missing document title
2. Missing html lang
3. 'Page must contain one main landmark'
4. 'page must contain a level-one heading'

I've tried calling ReactDOM.render(<App/>, document.createElement('div') and passing document as the first parameter to axe.run but still the same errors, because that just creates the component and doesn't use my index.html or anything.

Is this a bad place to be trying to do this testing? Where should it be?

Answer 1

I'm not very familiar with axe-core, but it looks like an in-browser testing tool. Where as jest is a Node.js tool. These two are different environments. I suppose you could fix all these warnings you get with some hacks and workarounds, but ultimately, it does not seem like the right way to go.

What I would suggest instead is take a look at react-a11y and eslint-plugin-jsx-a11y. Or, if you would prefer to stick with axe-core, then don't use jest, pick some other in-browser testing tool.