docs: fix example tests (#4564)

When I updated #4548 to latest it caused the qunit tests to fail. Turns out that [qunitjs](https://www.npmjs.com/package/qunitjs) has been deprecated and is now called just `qunit`, and `grunt-contrib-qunit` [has issues](gruntjs/grunt-contrib-qunit#209) if not using latest qunit. Once upgraded I was able to get the tests passing but only in headed mode. That was because puppeteer [is now headless by default](https://github.com/gruntjs/grunt-contrib-qunit/blob/main/docs/qunit-options.md#puppeteer), so passing the `ignoreDefaultArgs` param and the `--headless` arg was causing the issue. `jest_react` was also failing and after trying to fix it with it's current dependencies @dbjorge suggested it would be better to just change it over to `@react/testing-library`. It also means we can support react 18 in the examples too.
dequelabs · Oct 16, 2024 · cb80160 · cb80160
1 parent a2833e1
commit cb80160
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 37 deletions.
diff --git a/doc/examples/jest_react/jest.setup.js b/doc/examples/jest_react/jest.setup.js
diff --git a/doc/examples/jest_react/link.test.js b/doc/examples/jest_react/link.test.js
@@ -1,16 +1,12 @@
 import React from 'react';
-import { mount, render } from 'enzyme';
+import { render } from '@testing-library/react';
 import axe from 'axe-core';
 
 import Link from './link';
 
 test('Link has no axe violations', done => {
-  const fixture = document.createElement('div');
-  document.body.appendChild(fixture);
-
-  const linkComponent = mount(
-    <Link page="http://www.axe-core.org">axe website</Link>,
-    { attachTo: fixture }
+  const { container } = render(
+    <Link page="http://www.axe-core.org">axe website</Link>
   );
 
   const config = {
@@ -19,7 +15,7 @@ test('Link has no axe violations', done => {
       'link-in-text-block': { enabled: false }
     }
   };
-  axe.run(fixture, config, (err, { violations }) => {
+  axe.run(container, config, (err, { violations }) => {
     expect(err).toBe(null);
     expect(violations).toHaveLength(0);
     done();

diff --git a/doc/examples/jest_react/package.json b/doc/examples/jest_react/package.json
@@ -12,20 +12,16 @@
     "test": "jest"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.18.6",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
-    "axe-core": "^4.6.2",
-    "enzyme": "^3.11.0",
-    "jest": "^29.3.1",
-    "jest-environment-jsdom": "^29.3.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "@babel/preset-env": "^7.25.3",
+    "@babel/preset-react": "^7.24.7",
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/react": "^16.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "jest": {
-    "testEnvironment": "jsdom",
-    "setupFilesAfterEnv": [
-      "<rootDir>/jest.setup.js"
-    ]
+    "testEnvironment": "jsdom"
   }
 }
diff --git a/doc/examples/qunit/Gruntfile.js b/doc/examples/qunit/Gruntfile.js
@@ -8,12 +8,7 @@ module.exports = function (grunt) {
       all: ['test/**/*.html'],
       options: {
         puppeteer: {
-          ignoreDefaultArgs: true,
-          args: [
-            '--headless',
-            '--disable-web-security',
-            '--allow-file-access-from-files'
-          ]
+          args: ['--disable-web-security', '--allow-file-access-from-files']
         },
         timeout: 10000
       }

diff --git a/doc/examples/qunit/package.json b/doc/examples/qunit/package.json
@@ -13,9 +13,9 @@
   },
   "devDependencies": {
     "axe-core": "^4.6.2",
-    "grunt": "^1.5.3",
-    "grunt-contrib-qunit": "^5.1.1",
-    "puppeteer": "^19.5.0",
-    "qunitjs": "^2.0.1"
+    "grunt": "^1.6.1",
+    "grunt-contrib-qunit": "^10.1.1",
+    "puppeteer": "^23.1.0",
+    "qunit": "^2.22.0"
   }
 }
diff --git a/doc/examples/qunit/test/test.html b/doc/examples/qunit/test/test.html
@@ -6,10 +6,10 @@
     <!-- Load local QUnit. -->
     <link
       rel="stylesheet"
-      href="../node_modules/qunitjs/qunit/qunit.css"
+      href="../node_modules/qunit/qunit/qunit.css"
       media="screen"
     />
-    <script src="../node_modules/qunitjs/qunit/qunit.js"></script>
+    <script src="../node_modules/qunit/qunit/qunit.js"></script>
     <!-- Load local lib and tests. -->
     <script src="../node_modules/axe-core/axe.min.js"></script>
     <script src="a11y.js"></script>