Fix @testing-library/jest-dom types properly

Author: karlhorky

package.json

@@ -37,6 +37,7 @@
     "@types/testing-library__jest-dom": "5.14.5",
     "eslint": "8.39.0",
     "eslint-config-upleveled": "4.2.1",
+    "expect": "^29.5.0",
     "stylelint": "^15.5.0",
     "stylelint-config-upleveled": "^1.0.2",
     "typescript": "5.0.4"

pnpm-lock.yaml

@@ -5,6 +5,5 @@ import App from './App';
 test('renders learn react link', () => {
   render(<App />);
   const linkElement = screen.getByText(/learn react/i);
-  // @ts-ignore -- Getting proper types for @testing-library/jest-dom is not simple https://github.com/testing-library/jest-dom/issues/123#issuecomment-1536490617
   expect(linkElement).toBeInTheDocument();
 });

src/App.test.js

@@ -1 +1,9 @@
 /// <reference types="react-scripts" />
+import { expect } from '@jest/globals';
+import { TestingLibraryMatchers } from '@testing-library/jest-dom/matchers';
+
+declare module 'expect' {
+  interface AsymmetricMatchers {}
+  interface Matchers<R = void>
+    extends TestingLibraryMatchers<typeof expect.stringContaining, R> {}
+}

src/react-app-env.d.ts

@@ -4,7 +4,6 @@
   "compilerOptions": {
     "checkJs": true
   },
-  "types": ["node", "jest", "@testing-library/jest-dom"],
   "include": [
     "**/.eslintrc.cjs",
     "**/*.ts",