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

# Web 开发 # JavaScript # 软件测试

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

jest-axe 是什么？

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

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

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

成本效益：在开发过程中解决问题比部署后解决问题要便宜得多，而且速度更快。

提高意识：定期使用 jest-axe 等工具进行测试有助于开发人员更加注意可访问性考虑因素，从而影响他们在编写 HTML 和设计组件时的决策。

预防技术债务：尽早修复可以防止可访问性问题滚雪球般发展成更大、更难解决的问题。

设置 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 ;
}

describe('Button component', () => {
  it('should have no accessibility violations', async () => {
    const { container } = render(

测试 Vue 组件

如果你正在使用 Vue，那么 `jest-axe` 集成起来同样容易。以下是示例：

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

expect.extend(toHaveNoViolations);

const Button = {
  template: ''
};

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

好处

尽早发现问题：jest-axe 帮助您在开发过程中识别和修复可访问性问题。

易于集成：与 Jest 配合使用，无需陡峭的学习曲线。

可操作的反馈：提供有关违规行为的详细见解。

限制

自动化测试无法发现所有问题——对于键盘导航或颜色对比度等细微问题，仍然需要人工审核。

研究表明，自动化工具只能检测到约 30-50% 的可访问性问题。例如，它们擅长识别缺失的 alt 属性，但可能会错过上下文或可用性问题。

总结

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

祝测试愉快！

CLIS.CC