Switch to @testing-library/react (#362)

react-test-renderer is finally going away.

There was an attempt here to add tests of the actual image data generated by QRCodeCanvas but that turned out to be too unreliable across environments. Perhaps another time.

This also required removing testing across multiple versions of React. I'm not actually too worried about that but I left the shell of that in there. I would like to test against 18 & 19 at least, even if technically compatible further back. v17 is 4 years old. 16.8 (hooks) is over 5.

.github/workflows/ci.yml

@@ -22,15 +22,14 @@ jobs:
             lib
             examples/**/*.js
   test:
+    # Perhaps in the future we'll bring back matrix testing so we'll leave the support in.
     name: Test against React (@v${{ matrix.react_version }})
     needs: build
     runs-on: ubuntu-latest
     strategy:
       fail-fast: false
       matrix:
         react_version:
-          - '16'
-          - '17'
           - '18'
     steps:
       - uses: actions/checkout@v4
@@ -40,8 +39,9 @@ jobs:
           node-version-file: '.nvmrc'
           cache: 'pnpm'
       - run: pnpm install
-      - name: Install React deps (@v${{ matrix.react_version }})
-        run: pnpm add -D --no-lockfile react@${{ matrix.react_version }} react-dom@${{ matrix.react_version }} react-test-renderer@${{ matrix.react_version }}
+      # Only testing with one version of React, as specified in dependencies.
+      # - name: Install React deps (@v${{ matrix.react_version }})
+      #   run: pnpm add -D --no-lockfile react@${{ matrix.react_version }} react-dom@${{ matrix.react_version }}
       - run: pnpm test
   lint:
     needs: build

jest.config.js

@@ -1,5 +1,6 @@
 /** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
   preset: 'ts-jest',
-  testEnvironment: 'node',
+  testEnvironment: 'jsdom',
+  testEnvironmentOptions: {resources: 'usable'},
 };

package.json

@@ -39,16 +39,17 @@
   "files": [
     "lib"
   ],
-  "dependencies": {},
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
     "@jest/globals": "^29.5.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/react": "^16.0.0",
     "@types/node": "^20.4.10",
     "@types/react": "^18.0.8",
     "@types/react-dom": "^18.0.3",
-    "@types/react-test-renderer": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^6.3.0",
     "@typescript-eslint/parser": "^6.3.0",
     "eslint": "^8.6.0",
@@ -59,10 +60,10 @@
     "eslint-plugin-react-hooks": "^4.5.0",
     "gh-pages": "^6.0.0",
     "jest": "^29.2.2",
+    "jest-environment-jsdom": "^29.7.0",
     "prettier": "^3.0.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-test-renderer": "^18.0.0",
     "ts-jest": "^29.1.0",
     "tsup": "^8.0.2",
     "typescript": "^5.0.4"