在Create-React-App测试套件中运行ax-core测试

Question

有没有办法可以在我的create-react-app测试中运行ax-core？哪个使用Jest.

我知道,我可以使用像react-axe这样的东西,但它看起来只是输出到chrome控制台,我试图让结果分开我的测试.

我已经安装axe-core并尝试创建一个简单的测试,但它似乎没有做任何事情.

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

运行这个我总是得到4个错误,我猜是因为文档完全是空的.

1. 缺少文档标题
2. 缺少html lang
3. '页面必须包含一个主要标志'
4. '页面必须包含一级标题'

我已经尝试调用ReactDOM.render(<App/>, document.createElement('div')并传递文档作为第一个参数axe.run但仍然是相同的错误,因为这只是创建组件而不使用我的index.html或任何东西.

这是一个尝试进行此测试的不好的地方吗？应该在哪里？

Answer 1

我对 axe-core 不太熟悉，但它看起来像是一个浏览器内测试工具。其中 jest 是一个 Node.js 工具。这两个是不同的环境。我想你可以通过一些技巧和解决方法来解决所有这些警告，但最终，这似乎不是正确的方法。

我建议看看react-a11y和eslint-plugin-jsx-a11y。或者，如果您更愿意坚持使用 axe-core，那么不要使用 jest，选择其他一些浏览器内测试工具。