使用`jest-axe`进行自动化可访问性测试

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

你知道什么是jest-axe吗？

jest-axe 是一个基于 axe-core 可访问性引擎构建的 Jest 匹配器。它允许你测试渲染的组件的可访问性违规，并能无缝集成到现有的 Jest 测试套件中。

为什么及早发现无障碍性问题很重要？

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

1. 成本效益: 在开发阶段解决问题比部署后解决这些问题更便宜且更快。
2. 提高意识: 使用如 jest-axe 等工具定期进行测试，有助于开发人员更加重视无障碍性考量，在编写 HTML 和设计组件时作出更明智的决策。
3. 防止技术债务: 早期修复可以防止无障碍性问题积累成更大、更难解决的问题。

安装 jest-axe：

首先，安装一下这个包。

在终端中运行以下命令：

npm install --save-dev jest-axe  # 此命令用于安装 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>点击我</button>;
    }

    describe('按钮组件', () => {
      it('不应有任何无障碍访问问题', async () => {
        const { container } = render(<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>点我</button>'
    };

    describe('Vue 中的 Button 组件', () => {
      it('按钮组件不应该有任何无障碍访问违规', async () => {
        const wrapper = mount(Button);
        const results = await axe(wrapper.element);
        expect(results).toHaveNoViolations();
      });
    });

进入全屏 退出全屏

好处

1. 尽早发现并解决问题： jest-axe 帮助你在开发过程中识别并修复无障碍问题。
2. 简单集成： 与 Jest 兼容，无需复杂的配置或学习。
3. 可操作的反馈： 提供实用的反馈信息。

限制

• 自动化测试无法捕捉所有问题，对于细微如键盘导航或颜色对比的问题，人工检查仍然是必要的。
• 自动化测试无法捕捉所有问题，比如只能检测到大约30-50%的无障碍问题。它们很擅长识别缺失的alt属性，但可能会漏掉涉及上下文或可用性的问题。

结尾啦

通过将 jest-axe 添加到您的测试套件中，您正在朝构建无障碍的 web 应用程序迈出坚实的一步。但请记住，没有任何工具能保证完全无障碍。结合自动化测试、手动测试和用户测试可以获得最佳结果。

祝你测试愉快！