Update a11y test to have an inaccessible form. (kentcdodds#31)

Co-authored-by: Gavriel Rachael-Homann <gavriel@gavriel.dev>

Author: gavrielrh

src/__tests__/a11y.js

@@ -3,9 +3,11 @@ import {render} from '@testing-library/react'
 import {axe} from 'jest-axe'
 
 function InaccessibleForm() {
+ // Form inputs must have an accessible name
+ // Ref: 4.1.1 of W3C HTML Accessibility API Mappings 1.0
  return (
  <form>
- <input placeholder="email" />
+ <input id="username" />
  </form>
  )
 }
@@ -21,13 +23,11 @@ function AccessibleForm() {
 
 test('inaccessible forms fail axe', async () => {
  const {container} = render(<InaccessibleForm />)
- try {
- expect(await axe(container)).toHaveNoViolations()
- } catch (error) {
- // NOTE: I can't think of a situation where you'd want to test that some HTML
- // actually _does_ have accessibility issues... This is only here for
- // demonstration purposes.
- }
+ const axeResult = await axe(container)
+ expect(() => expect(axeResult).toHaveNoViolations()).toThrow()
+ // NOTE: I can't think of a situation where you'd want to test that some HTML
+ // actually _does_ have accessibility issues... This is only here for
+ // demonstration purposes.
 })
 
 test('accessible forms pass axe', async () => {