使用 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 />);
    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中文網其他相關文章！