使用 jest-axe 进行自动化测试

构建 Web 应用程序时，确保可访问性应该与提供功能或修复错误一样重要。像 jest-axe 这样的自动化测试工具可以让您在开发早期轻松发现常见的可访问性问题。

什么是玩笑斧？

jest-axe 是一个构建在 axe-core 可访问性引擎之上的 Jest 匹配器。它允许您测试渲染的组件是否存在可访问性违规，并与现有的 Jest 测试套件无缝集成。

为什么要尽早发现可访问性问题？

在开发过程的早期解决可访问性错误至关重要，原因如下：

1. 成本效率：在开发过程中解决问题比在部署后解决问题要便宜得多且速度更快。
2. 提高意识：定期使用 jest-axe 等工具进行测试可以帮助开发人员更加注意可访问性方面的考虑，从而影响他们在编写 HTML 和设计组件时的决策。
3. 防止技术债务：早期修复可防止可访问性问题像滚雪球一样发展成更大、更难解决的问题。

设置 jest-axe

首先，安装软件包：

npm install --save-dev jest-axe

接下来，将其添加到您的测试文件中：

import { axe, toHaveNoViolations } from 'jest-axe';

expect.extend(toHaveNoViolations);

编写基本测试

以下是如何测试简单组件的可访问性的示例：

import React from 'react';
import { render } from '@testing-library/react';
import { axe } from 'jest-axe';

function Button() {
  return <button>Click me</button>;
}

describe('Button component', () => {
  it('should have no accessibility violations', async () => {
    const { container } = render(<button></button>);
    const results = await axe(container);
    expect(results).toHaveNoViolations();
  });
});

测试 Vue 组件

如果您使用 Vue，jest-axe 也可以轻松集成。这是一个例子：

import { mount } from '@vue/test-utils';
import { axe, toHaveNoViolations } from 'jest-axe';

expect.extend(toHaveNoViolations);

const Button = {
  template: '<button>Click me</button>'
};

describe('Button component (Vue)', () => {
  it('should have no accessibility violations', async () => {
    const wrapper = mount(Button);
    const results = await axe(wrapper.element);
    expect(results).toHaveNoViolations();
  });
});

好处

1. 及早发现问题： jest-axe 可帮助您在开发过程中识别并修复可访问性问题。
2. 轻松集成：与 Jest 配合使用，没有陡峭的学习曲线。
3. 可操作的反馈：提供有关违规行为的详细见解。

局限性

• 自动化测试无法捕获所有内容 - 对于键盘导航或颜色对比度等细微问题，仍然需要手动审核。
• 研究表明，自动化工具只能检测到大约 30-50% 的可访问性问题。例如，他们擅长识别缺失的替代属性，但可能会错过上下文或可用性问题。

总结

通过将 jest-axe 添加到您的测试套件中，您正在朝着构建可访问的 Web 应用程序迈出坚实的一步。但是，请记住，没有任何工具可以保证完全可访问性。将自动化测试与手动检查和用户测试相结合，以获得最佳结果。

测试愉快！

以上是使用 jest-axe 进行自动化测试的详细内容。更多信息请关注PHP中文网其他相关文章！