在Create-React-App测试套件中运行轴心测试

Question

是否可以在create-react-app测试中运行axe-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不太熟悉，但是它看起来像一个浏览器内测试工具。开玩笑的是Node.js工具。这两个是不同的环境。我想您可以通过一些技巧和变通办法来解决所有这些警告，但最终，这似乎并不是正确的方法。

相反，我建议看一下react-a11y和eslint-plugin-jsx-a11y。或者，如果您希望坚持使用斧头核心，那么不要使用玩笑，而是选择其他一些浏览器内测试工具。