当前位置：首页 > article >正文

使用jest-axe为你的前端项目自动化测试

article 2025/1/4 13:22:42

开发网页应用时，别光顾着加新功能或者修bug，可访问性同样不能忽视。用 jest-axe 这样的自动化工具，在编程初期就能轻松揪出那些常见的无障碍问题。

jest-axe 是什么？

简单来说，jest-axe 就是一个给 Jest 测试用的“小帮手”，它背后靠的是 axe-core 这个强大的无障碍性检测引擎。它能帮你检查网页组件是否符合无障碍标准，而且跟你的 Jest 测试流程完美对接。

为什么要在早期测试代码问题？

早点解决无障碍问题，好处多多：

省时省力： 开发阶段解决问题，可比上线后手忙脚乱要省心多了。
培养意识： 经常用 jest-axe 测试，能让开发者更加关注无障碍性，写代码、设计组件时自然会有所考虑。
避免债台高筑： 小问题不解决，积累成大问题就难搞了，早期修复能帮你避免这样的技术债务。

如何上手 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 />);
    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();
  });
});