\r\n ![](\"#\"/)
\r\n
\r\n `\r\n\r\n // pass anything that outputs html to axe\r\n const html = render()\r\n\r\n const results = await axe(html, {\r\n rules: {\r\n // for demonstration only, don't disable rules that need fixing.\r\n 'image-alt': { enabled: false }\r\n }\r\n })\r\n\r\n expect(results).toHaveNoViolations()\r\n})\r\n```\r\n\r\n### Testing isolated components\r\n\r\n> All page content must be contained by landmarks (region)\r\n\r\nWhen testing with aXe sometimes it assumes you are testing a page. This then results in unexpected violations for landmarks for testing isolation components.\r\n\r\nYou can disable this behaviour with the `region` rule:\r\n\r\n```javascript\r\nconst { configureAxe } = require('jest-axe')\r\n\r\nconst axe = configureAxe({\r\n rules: {\r\n // disable landmark rules when testing isolated components.\r\n 'region': { enabled: false }\r\n }\r\n})\r\n```\r\n\r\n## Setting global configuration\r\n\r\nIf you find yourself repeating the same options multiple times, you can export a version of the `axe` function with defaults set.\r\n\r\nNote: You can still pass additional options to this new instance; they will be merged with the defaults.\r\n\r\nThis could be done in [Jest's setup step](https://jestjs.io/docs/en/setup-teardown)\r\n\r\n```javascript\r\n// Global helper file (axe-helper.js)\r\nconst { configureAxe } = require('jest-axe')\r\n\r\nconst axe = configureAxe({\r\n rules: {\r\n // for demonstration only, don't disable rules that need fixing.\r\n 'image-alt': { enabled: false }\r\n }\r\n})\r\n\r\nmodule.exports = axe\r\n```\r\n\r\n```javascript\r\n// Individual test file (test.js)\r\nconst { toHaveNoViolations } = require('jest-axe')\r\nconst axe = require('./axe-helper.js')\r\n\r\nexpect.extend(toHaveNoViolations)\r\n\r\nit('should demonstrate this matcher`s usage with a default config', async () => {\r\n const render = () => `\r\n \r\n \r\n
\r\n `\r\n\r\n // pass anything that outputs html to axe\r\n const html = render()\r\n\r\n expect(await axe(html)).toHaveNoViolations()\r\n})\r\n```\r\n\r\n### Setting custom rules and checks.\r\n\r\nThe configuration object passed to `configureAxe`, accepts a `globalOptions` property to configure the format of the data used by axe and to add custom checks and rules. The property value is the same as the parameter passed to [axe.configure](https://github.com/dequelabs/axe-core/blob/master/doc/API.md#parameters-1). \r\n\r\n```javascript\r\n// Global helper file (axe-helper.js)\r\nconst { configureAxe } = require('jest-axe')\r\n\r\nconst axe = configureAxe({\r\n globalOptions: {\r\n checks: [/* custom checks definitions */]\r\n },\r\n // ...\r\n})\r\n\r\nmodule.exports = axe\r\n```\r\n\r\n### Setting the level of user impact.\r\n\r\nAn array which defines which [impact](https://github.com/dequelabs/axe-core/blob/develop/doc/rule-descriptions.md) level should be considered. This ensures that only violations with a specific impact on the user are considered. The level of impact can be \"minor\", \"moderate\", \"serious\", or \"critical\".\r\n\r\n```javascript\r\n// Global helper file (axe-helper.js)\r\nconst { configureAxe } = require('jest-axe')\r\n\r\nconst axe = configureAxe({\r\n impactLevels: ['critical'],\r\n // ...\r\n})\r\n\r\nmodule.exports = axe\r\n```\r\n\r\nRefer to [Developing Axe-core Rules](https://github.com/dequelabs/axe-core/blob/master/doc/rule-development.md) for instructions on how to develop custom rules and checks.\r\n\r\n## Thanks\r\n- [Jest][Jest] for the great test runner that allows extending matchers.\r\n- [axe](https://www.deque.com/axe/) for the wonderful axe-core that makes it so easy to do this.\r\n- Government Digital Service for making coding in the open the default.\r\n - GOV.UK Publishing Frontend team who published the [basis of the aXe reporter](https://github.com/alphagov/govuk_publishing_components/blob/581c22c9d35d85d5d985571d007f6397a4399f4c/spec/javascripts/govuk_publishing_components/AccessibilityTestSpec.js)\r\n- [jest-image-snapshot](https://github.com/americanexpress/jest-image-snapshot) for inspiration on README and repo setup\r\n\r\n[Jest]: https://jestjs.io/\r\n","readmeFilename":"README.md"}