Rerender jest-axe

1. render()

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

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

2. rerender() uses and passes parameters

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

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

3. axe()

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

   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() .

   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()
   })