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.

Author: straker

doc/examples/jest_react/jest.setup.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();

doc/examples/jest_react/link.test.js

@@ -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"
   }
 }

doc/examples/jest_react/package.json

@@ -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
       }

doc/examples/qunit/Gruntfile.js

@@ -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"
   }
 }

doc/examples/qunit/package.json

@@ -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>