@a11ycore/jest 中文文档教程

Question

@a11ycore/jest

自定义 Jest 用于测试可访问性的 aXe 匹配器

⚠️✋ This project does not guarantee what you build is accessible.

GDS 可访问性团队发现只有 ~30% 的问题是通过自动化测试发现的。

Installation:

npm install --save-dev @a11ycore/jest

Usage:

const React = require("react");
const ReactDOMServer = require("react-dom/server");
const { runA11yJest } = require("@a11ycore/jest");

describe("jest", () => {
  test("it should call the runA11yMethod", async () => {
    const element = React.createElement("img", { src: "#" });
    const html = ReactDOMServer.renderToString(element);
    const results = await runA11yJest(html)
    expect(results.violations.length).toBeGreaterThan(1);
  });
});

Testing React with Enzyme

const React = require('react')
const App = require('./app')

const { mount } = require('enzyme')
const { runA11yJest } = require('@a11ycore/jest')

it('should demonstrate this matcher`s usage with enzyme', async () => {
  const wrapper = mount(<App/>)
  const results = await runA11yJest(wrapper.getDOMNode())
  expect(results.violations.length).toBe(0);
})

Testing React with React Testing Library

const React = require('react')
const App = require('./app')

const { render } = require('@testing-library/react')
const { runA11yJest } = require('@a11ycore/jest')

it('should demonstrate this matcher`s usage with react testing library', async () => {
  const { container } = render(<App/>)
  const results = await runA11yJest(container)
  expect(results.violations.length).toBe(0);
})

注意：如果你正在使用 react testing library <9.0.0 你应该使用 cleanup 方法。 此方法从 DOM 中删除呈现的应用程序并确保干净的 HTML 文档以供进一步测试。

Testing Vue with Vue Test Utils

const App = require('./App.vue')

const { mount } = require('@vue/test-utils')
const { runA11yJest } = require('@a11ycore/jest')

it('should demonstrate this matcher`s usage with vue test utils', async () => {
  const wrapper = mount(Image)
  const results = await runA11yJest(wrapper.element)
  expect(results.violations.length).toBe(0);
})

Testing Vue with Vue Testing Library

const App = require('./app')

const { render } = require('@testing-library/vue')
const { runA11yJest } = require('@a11ycore/jest')

it('should demonstrate this matcher`s usage with react testing library', async () => {
  const { container } = render(<App/>)
  const results = await runA11yJest(container)

  expect(results.violations.length).toBe(0);
})

注意：如果你正在使用 vue 测试库 <3.0.0 你应该使用 cleanup 方法。 此方法从 DOM 中删除呈现的应用程序并确保干净的 HTML 文档以供进一步测试。

configureA11yJest configuration

runA11yJest 函数允许使用 与 axe-core 中记录的选项相同：

const { runA11yJest } = require('@a11ycore/jest')

it('should demonstrate this matcher`s usage with a custom config', async () => {
  const render = () => `
    <div>
      <img src="#"/>
    </div>
  `

  // pass anything that outputs html to axe
  const html = render()

  const results = await runA11yJest(html, {
    rules: {
      // for demonstration only, don't disable rules that need fixing.
      'image-alt': { enabled: false }
    }
  })

  expect(results.violations.length).toBe(0);
})

Setting global configuration

如果您发现自己多次重复相同的选项，您可以导出一个设置了默认值的 runA11yJest 函数版本。

注意：您仍然可以将其他选项传递给这个新实例； 它们将与默认值合并。

这可以在 Jest 的设置步骤中完成

// Global helper file (axe-helper.js)
const { configureA11yJest } = require('@a11ycore/jest')

const runA11yJest = configureA11yJest({
  rules: {
    // for demonstration only, don't disable rules that need fixing.
    'image-alt': { enabled: false }
  }
})

module.exports = runA11yJest

Setting custom rules and checks.

。传递给 configureA11yJest 的配置对象接受一个globalOptions 属性配置 ax 使用的数据格式并添加自定义检查和规则。 属性值与传递给 axe.configure。

// Global helper file (axe-helper.js)
const { configureA11yJest } = require('@a11ycore/jest')

const runA11yCore = configureA11yJest({
  globalOptions: {
    checks: [/* custom checks definitions */]
  },
  // ...
})

module.exports = runA11yCore

请参阅开发 Axe-core 规则以获取有关如何开发自定义规则的说明规则和检查。

Thanks

• Jest for the great test runner that allows extending matchers.
• aXe for the wonderful axe-core that makes it so easy to do this.
• Government Digital Service for making coding in the open the default.
• GOV.UK Publishing Frontend team who published the basis of the aXe reporter
• jest-image-snapshot for inspiration on README and repo setup