feat: 🎸 added jest-axe (#2650)

Co-authored-by: Claudio Wunder <cwunder@gnome.org>

package.json

@@ -98,6 +98,7 @@
     "@types/color-string": "^1.5.2",
     "@types/elasticlunr": "^0.9.5",
     "@types/jest": "^28.1.6",
+    "@types/jest-axe": "^3.5.4",
     "@types/mdx-js__react": "^1.5.5",
     "@types/react-click-outside-hook": "^1.0.0",
     "@types/react-dom": "^18.0.6",
@@ -122,6 +123,7 @@
     "eslint-plugin-testing-library": "^5.6.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^28.1.3",
+    "jest-axe": "^6.0.0",
     "jest-environment-jsdom": "^28.1.3",
     "jest-fetch-mock": "^3.0.3",
     "markdown-yaml-metadata-parser": "^3.0.0",

test/pages/404.test.tsx

@@ -1,11 +1,20 @@
 import React from 'react';
 import { render } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
 import NotFound from '../../src/pages/404';
 import '../__mocks__/intersectionObserverMock';
 
+expect.extend(toHaveNoViolations);
+
 describe('404 page', () => {
   it('renders correctly', () => {
     const { container } = render(<NotFound />);
     expect(container).toMatchSnapshot();
   });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<NotFound />);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
 });

test/pages/download/index.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { axe, toHaveNoViolations } from 'jest-axe';
 import DownloadPage, {
   DownloadNodeReleases,
 } from '../../../src/pages/download';
@@ -27,6 +28,7 @@ const nodeReleaseData: DownloadNodeReleases = {
   },
 };
 
+expect.extend(toHaveNoViolations);
 describe('Download page', () => {
   it('renders correctly', () => {
     const { container } = render(
@@ -44,4 +46,14 @@ describe('Download page', () => {
 
     expect(container).toMatchSnapshot();
   });
+
+  // TODO: fix this test
+  it.skip('shold have no a11y violations', async () => {
+    const { container } = render(
+      <DownloadPage location={window.location} data={nodeReleaseData} />
+    );
+    const results = await axe(container);
+
+    expect(results).toHaveNoViolations();
+  });
 });