jest / react-testing-library / axe

App.jsx

import React from "react"

let App = () => (
  <div>
    <img data-testid="image" src="" />
    <p>hi</p>
  </div>
)

export default App

App.test.js

import React from 'react'
import { render } from '@testing-library/react';
const { axe, toHaveNoViolations } = require('jest-axe')
expect.extend(toHaveNoViolations)

import App from '../'

describe('App', function() {

  test('mounts', function() {
    let { getByText } = render(<App />)
    expect(getByText('hi')).toBeTruthy()
  })

  test('accessibility', async function() {
    let { container } = render(<App />)
    let results = await axe(container)
    expect(results).toHaveNoViolations()
  })

})

configuredInstance.test.js

let axeConfig = {
  impactLevels: ['critical'],
  rules: {
    'color-contrast': { enabled: false }
  }
}

...

test('accessibility', async function() {
  let { container } = render(<App />)
  let results = await axe(container, axeConfig)
  expect(results).toHaveNoViolations()
})

disable rule with cli

axe www.deque.com --disable color-contrast