test: add test helper for accessibility

As proposed in #22343, the components can be automatically validated
for accessibility. This adds a test helper that runs Axe to check
for accessibility violations.

components/affix/__tests__/Affix.test.tsx

@@ -4,6 +4,7 @@ import Affix, { AffixProps, AffixState } from '..';
 import { getObserverEntities } from '../utils';
 import Button from '../../button';
 import rtlTest from '../../../tests/shared/rtlTest';
+import accessibilityTest from '../../../tests/shared/accessibilityTest';
 import { sleep } from '../../../tests/utils';
 
 const events: Partial<Record<keyof HTMLElementEventMap, (ev: Partial<Event>) => void>> = {};
@@ -53,6 +54,7 @@ class AffixMounter extends React.Component<{
 
 describe('Affix Render', () => {
   rtlTest(Affix);
+  accessibilityTest(Affix);
 
   const domMock = jest.spyOn(HTMLElement.prototype, 'getBoundingClientRect');
   let affixMounterWrapper: ReactWrapper<unknown, unknown, AffixMounter>;

components/alert/__tests__/index.test.tsx

@@ -5,12 +5,14 @@ import Button from '../../button';
 import Tooltip from '../../tooltip';
 import Popconfirm from '../../popconfirm';
 import rtlTest from '../../../tests/shared/rtlTest';
+import accessibilityTest from '../../../tests/shared/accessibilityTest';
 import { sleep } from '../../../tests/utils';
 
 const { ErrorBoundary } = Alert;
 
 describe('Alert', () => {
   rtlTest(Alert);
+  accessibilityTest(Alert);
 
   beforeAll(() => {
     jest.useFakeTimers();

package.json

@@ -166,6 +166,7 @@
     "@types/enzyme": "^3.10.5",
     "@types/gtag.js": "^0.0.8",
     "@types/jest": "^27.0.0",
+    "@types/jest-axe": "^3.5.3",
     "@types/jest-environment-puppeteer": "^4.4.0",
     "@types/jest-image-snapshot": "^4.1.0",
     "@types/lodash": "^4.14.139",
@@ -225,6 +226,7 @@
     "intersection-observer": "^0.12.0",
     "isomorphic-fetch": "^3.0.0",
     "jest": "^27.0.3",
+    "jest-axe": "^5.0.1",
     "jest-image-snapshot": "^4.5.1",
     "jest-puppeteer": "^6.0.0",
     "jquery": "^3.4.1",

tests/setupAfterEnv.ts

@@ -1,5 +1,7 @@
+import { toHaveNoViolations } from 'jest-axe';
 import toMatchRenderedSnapshot from './matchers/rendered-snapshot';
 
+expect.extend(toHaveNoViolations);
 expect.extend({
   toMatchRenderedSnapshot,
 });

tests/shared/accessibilityTest.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { axe } from 'jest-axe';
+
+// eslint-disable-next-line jest/no-export
+export default function accessibilityTest(Component: React.ComponentType) {
+  describe(`accessibility`, () => {
+    it(`component does not have any violations`, async () => {
+      jest.useRealTimers();
+      const wrapper = mount(<Component />);
+      const results = await axe(wrapper.getDOMNode());
+      expect(results).toHaveNoViolations();
+    });
+  });
+}

typings/jest.d.ts

@@ -1,5 +1,6 @@
 declare namespace jest {
   interface Matchers<R> {
     toMatchRenderedSnapshot(): R;
+    toHaveNoViolations(): R;
   }
 }