Skip to content

Commit

Permalink
*feat renderAndCheckA11Y for testing-library (#576)
Browse files Browse the repository at this point in the history
  • Loading branch information
Sodik authored Nov 7, 2024
1 parent 7a25664 commit 0df5ae4
Show file tree
Hide file tree
Showing 6 changed files with 50 additions and 16 deletions.
1 change: 1 addition & 0 deletions packages/test-helpers/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
"jest-axe": "^8.0.0"
},
"devDependencies": {
"@testing-library/react": "^12.1.5",
"@types/enzyme": "^3.10.12",
"@types/react": "^17.0.45",
"@types/react-dom": "^17.0.17",
Expand Down
15 changes: 15 additions & 0 deletions packages/test-helpers/src/axe.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { JestAxe } from 'jest-axe'

export type AxeOptions = Parameters<JestAxe>[1]
export const axeDefaultOptions: AxeOptions = {
rules: {
// We are testing small units. They might not contain landmarks
region: {
enabled: false,
},
// We are using chrome-off for SelectField
'autocomplete-valid': { enabled: false },
// TODO: Fix later
'aria-tooltip-name': { enabled: false },
},
}
18 changes: 3 additions & 15 deletions packages/test-helpers/src/enzyme.ts
Original file line number Diff line number Diff line change
@@ -1,23 +1,11 @@
import { MountRendererProps, mount as mountEnzyme, ReactWrapper } from 'enzyme'
import { axe, JestAxe, toHaveNoViolations } from 'jest-axe'
import { axe, toHaveNoViolations } from 'jest-axe'
import { ReactElement } from 'react'
import { act } from 'react-dom/test-utils'

expect.extend(toHaveNoViolations)
import { axeDefaultOptions, AxeOptions } from './axe'

type AxeOptions = Parameters<JestAxe>[1]
export const axeDefaultOptions: AxeOptions = {
rules: {
// We are testing small units. They might not contain landmarks
region: {
enabled: false,
},
// We are using chrome-off for SelectField
'autocomplete-valid': { enabled: false },
// TODO: Fix later
'aria-tooltip-name': { enabled: false },
},
}
expect.extend(toHaveNoViolations)

// eslint-disable-next-line @typescript-eslint/no-explicit-any
let getAxeNodeDefault: (wrapper: ReactWrapper<any>) => Element = () => document.body
Expand Down
2 changes: 2 additions & 0 deletions packages/test-helpers/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,5 @@ export * from './form'
export * from './hooks'
export * from './time'
export * from './utils'
export * from './axe'
export * from './render'
25 changes: 25 additions & 0 deletions packages/test-helpers/src/render.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { ReactElement } from 'react'
import { render, RenderResult } from '@testing-library/react'
import { axe, toHaveNoViolations } from 'jest-axe'

import { axeDefaultOptions, AxeOptions } from './axe'

expect.extend(toHaveNoViolations)

export interface RenderAndCheckA11YOptions {
axeOptions?: AxeOptions
}

export const renderAndCheckA11Y = async <P>(
node: ReactElement<P>,
{ axeOptions }: RenderAndCheckA11YOptions = {
axeOptions: axeDefaultOptions,
},
): Promise<RenderResult> => {
const result = render(node)

const results = await axe(result.container, axeOptions)
expect(results).toHaveNoViolations()

return result
}
5 changes: 4 additions & 1 deletion pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 0df5ae4

Please sign in to comment.