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

Question

有没有办法在我的创建-反应-应用程序测试中运行斧头核心？哪个使用开玩笑。

我知道，我可以使用类似 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但仍然相同的错误，因为这只会创建组件并且不使用我的索引.html或任何东西。

这是尝试进行此测试的坏地方吗？应该在哪里？

Answer 1

我对 axe-core 不是很熟悉，但它看起来像一个浏览器内测试工具。其中，开玩笑是节点.js工具。这两者是不同的环境。我想您可以通过一些黑客和解决方法来解决所有这些警告，但最终，这似乎不是正确的方法。

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