TestReact-testing-library

Rerender jest-axe

,

  1. render()

    rerender is used to simulate props changing. How to get rerender():

    1
    const {rerender} = render(<FavoriteNumber />);

  1. rerender() uses and passes parameters

    rerender() is used to test the new props of the component, so its argument is the component with props.

    1
    2
    ...
    rerender(<FavoriteNumber max={10} />)

  1. axe()

    axe() is a helper for jest. Can be used to help us check various properties of the container. Note that axe is asynchronous.

    1
    2
    3
    4
    5
    6
    7
    import {axe} from 'jest-axe'

    test('the form is accessible', async() => {
       const {container} = render(<Form />)
       const results = await axe(container)
       expect(results.violations).toHaveLength(0)
    })

    The above method uses axe(), but does not get a useful error message. So you can use the special methods that come with axe() .

    1
    2
    3
    4
    5
    6
    7
    8
    import {axe, toHaveNoViolations} from 'jest-axe'
    import 'jest-axe/extend-expect' //Replace expect.extend(toHaveNoViolations), simplify the code

    test('the form is accessible', () => {
       const {container} = render(<Form />)
       const results = await axe(container)
       expect(results).toHaveNoViolations()
    })

Share