reactjs - Webpack 5 & Jest - 类型 'toBeInTheDocument' 上不存在属性 'JestMatchers'

Question

我无法让 Jest 的类型与 Webpack 5 和 TypeScript 一起工作，我已经尝试过其他解决方案来解决同样的问题。在下面的示例测试中，问题仅出在“屏幕”和“toBeInTheDocument”上。我倾向于它是 ESLint 配置问题。

我无法运行测试，它们失败了 Property 'toBeInTheDocument' does not exist on type 'JestMatchers<HTMLElement>'. .我正在使用 yarn 3.1.0。我试过了 this answer 和许多其他的，包括通过 tsconfig.json 导入类型.我做错了什么？

示例测试(src/components/Example/spec/test.spec.tsx):

import * as React from 'react';
import { render, screen } from '@testing-library/react';
import { Example } from './Example';
import "@testing-library/jest-dom/extend-expect";
import "@testing-library/jest-dom";

test("Renders correctly", () => {
  render(<Example />);
  const example = screen.getByAltText("Example");
  expect(example).toBeInTheDocument();
});

jest.config.js:

module.exports = {
  // An array of directory names to be searched recursively up from the requiring module's location
  moduleDirectories: ['node_modules', '<rootDir>/src'],

  // A map to module names that allow stubbing out resources with a single module
  moduleNameMapper: {
    '\\.(css|less)$': '<rootDir>/__mocks__/styleMock.js',
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/__mocks__/fileMock.js',
  },

  // Preset for our Jest configuration base
  preset: 'ts-jest/presets/js-with-ts',

  setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],

  // Environment used for testing
  testEnvironment: 'jsdom',
};

webpack.config.js :

/* eslint-disable */
const { ModuleFederationPlugin } = require('webpack').container;
const path = require('path');
const packageJsonName = require('./package.json').name;
const packageJsonDeps = require('./package.json').dependencies;
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: path.resolve(__dirname, 'src', 'index.ts'),
  devServer: {
    client: {
      overlay: true,
    },
    static: {
      directory: './dist',
    },
    port: 3001,
    historyApiFallback: true
  },
  module: {
    rules: [
      {
        test: /\.(tsx|ts|jsx)?$/,
        //exclude: /node_modules/,
        use: [
          {
            loader: 'ts-loader',
            options: {
              experimentalWatchApi: true,
              transpileOnly: true,
            },
          },
        ],
      },
      {
        test: /\.js$/,
        enforce: 'pre',
        use: ['source-map-loader'],
      },
    ],
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: 'auto',
  },
  resolve: {
    cacheWithContext: false,
    extensions: ['.js', '.ts', '.tsx', '.jsx'],
    plugins: [
      new TsconfigPathsPlugin({
        configFile: path.resolve(__dirname, './tsconfig.json'),
      }),
    ],
    symlinks: false,
  },
};

package.json :

{
  "scripts": {
    "start": "webpack-cli serve",
    "build": "webpack --mode production",
    "dev": "webpack serve --progress",
    "test": "jest",
    "test:coverage": "jest --coverage --watchAll=false",
    "test:watch": "jest --watch"
  },
  "dependencies": {
    "react": "17.0.2",
    "react-router-dom": "^5.2.0",
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "12.1.2",
    "@testing-library/user-event": "13.5.0",
    "@types/jest": "27.0.2",
    "@types/react": "^17.0.33",
    "@types/react-router-dom": "5.3.2",
    "@typescript-eslint/eslint-plugin": "5.2.0",
    "@typescript-eslint/parser": "4.33.0",
    "eslint": "7.32.0",
    "eslint-config-prettier": "8.3.0",
    "eslint-plugin-import": "2.25.2",
    "eslint-plugin-jest": "25.2.2",
    "eslint-plugin-react": "7.26.1",
    "eslint-plugin-react-hooks": "4.2.0",
    "jest": "^27.3.1",
    "prettier": "2.4.1",
    "ts-jest": "^27.0.7",
    "ts-loader": "^9.2.6",
    "tslib": "^2.3.1",
    "typescript": "~4.3.5",
    "webpack": "5",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.3.1"
  }
}

和tsconfig.json :

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "declaration": true,
    "esModuleInterop": true,
    "importHelpers": true,
    "jsx": "react",
    "lib": ["es6", "dom"],
    "module": "esnext",
    "moduleResolution": "node",
    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noUnusedParameters": true,
    "outDir": "dist",
    "resolveJsonModule": true,
    "rootDir": ".",
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "target": "es6"
  },
  "include": ["**/*.ts", "**/*.tsx", "**/*.jsx", "**/*.js"],
  "exclude": [
    "dist",
    "node_modules"
  ]
}

和setupTests.ts只是:import '@testing-library/jest-dom/extend-expect';

感谢您的指点。

Answer 1

安装类型使用:

npm i @types/testing-library__jest-dom -D