title: Webpack 5 & Jest - Property 'toBeInTheDocument' does not exist on type 'JestMatchers<HTMLElement>'
body: <p>I can't get the typings for Jest to work with Webpack 5 and TypeScript, I've tried other solutions for the same problem. The problem is only with &quot;screen&quot; and &quot;toBeInTheDocument&quot; in my example test below. I'm leaning toward it being an ESLint configuration issue.</p>
  <p>I can't run the tests, they fail with <code>Property 'toBeInTheDocument' does not exist on type 'JestMatchers&lt;HTMLElement&gt;'.</code>. I'm using Yarn 3.1.0. I've tried <a href="https://stackoverflow.com/a/66708479/2257964">this</a> answer and many others, including importing the types through <code>tsconfig.json</code>. What am I doing wrong?</p>
  <p>Example test (<code>src/components/Example/spec/test.spec.tsx</code>):</p>
  <pre><code>import * as React from 'react';
  import { render, screen } from '@testing-library/react';
  import { Example } from './Example';
  import &quot;@testing-library/jest-dom/extend-expect&quot;;
  import &quot;@testing-library/jest-dom&quot;;
  
  test(&quot;Renders correctly&quot;, () =&gt; {
    render(&lt;Example /&gt;);
    const example = screen.getByAltText(&quot;Example&quot;);
    expect(example).toBeInTheDocument();
  });
  </code></pre>
  <p>jest.config.js:</p>
  <pre><code>module.exports = {
    // An array of directory names to be searched recursively up from the requiring module's location
    moduleDirectories: ['node_modules', '&lt;rootDir&gt;/src'],
  
    // A map to module names that allow stubbing out resources with a single module
    moduleNameMapper: {
      '\\.(css|less)$': '&lt;rootDir&gt;/__mocks__/styleMock.js',
      '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
        '&lt;rootDir&gt;/__mocks__/fileMock.js',
    },
  
    // Preset for our Jest configuration base
    preset: 'ts-jest/presets/js-with-ts',
  
    setupFilesAfterEnv: ['&lt;rootDir&gt;/setupTests.ts'],
  
    // Environment used for testing
    testEnvironment: 'jsdom',
  };
  </code></pre>
  <p><code>webpack.config.js</code>:</p>
  <pre><code>/* 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,
    },
  };
  </code></pre>
  <p><code>package.json</code>:</p>
  <pre><code>{
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;webpack-cli serve&quot;,
      &quot;build&quot;: &quot;webpack --mode production&quot;,
      &quot;dev&quot;: &quot;webpack serve --progress&quot;,
      &quot;test&quot;: &quot;jest&quot;,
      &quot;test:coverage&quot;: &quot;jest --coverage --watchAll=false&quot;,
      &quot;test:watch&quot;: &quot;jest --watch&quot;
    },
    &quot;dependencies&quot;: {
      &quot;react&quot;: &quot;17.0.2&quot;,
      &quot;react-router-dom&quot;: &quot;^5.2.0&quot;,
    },
    &quot;devDependencies&quot;: {
      &quot;@testing-library/jest-dom&quot;: &quot;^5.14.1&quot;,
      &quot;@testing-library/react&quot;: &quot;12.1.2&quot;,
      &quot;@testing-library/user-event&quot;: &quot;13.5.0&quot;,
      &quot;@types/jest&quot;: &quot;27.0.2&quot;,
      &quot;@types/react&quot;: &quot;^17.0.33&quot;,
      &quot;@types/react-router-dom&quot;: &quot;5.3.2&quot;,
      &quot;@typescript-eslint/eslint-plugin&quot;: &quot;5.2.0&quot;,
      &quot;@typescript-eslint/parser&quot;: &quot;4.33.0&quot;,
      &quot;eslint&quot;: &quot;7.32.0&quot;,
      &quot;eslint-config-prettier&quot;: &quot;8.3.0&quot;,
      &quot;eslint-plugin-import&quot;: &quot;2.25.2&quot;,
      &quot;eslint-plugin-jest&quot;: &quot;25.2.2&quot;,
      &quot;eslint-plugin-react&quot;: &quot;7.26.1&quot;,
      &quot;eslint-plugin-react-hooks&quot;: &quot;4.2.0&quot;,
      &quot;jest&quot;: &quot;^27.3.1&quot;,
      &quot;prettier&quot;: &quot;2.4.1&quot;,
      &quot;ts-jest&quot;: &quot;^27.0.7&quot;,
      &quot;ts-loader&quot;: &quot;^9.2.6&quot;,
      &quot;tslib&quot;: &quot;^2.3.1&quot;,
      &quot;typescript&quot;: &quot;~4.3.5&quot;,
      &quot;webpack&quot;: &quot;5&quot;,
      &quot;webpack-cli&quot;: &quot;^4.9.1&quot;,
      &quot;webpack-dev-server&quot;: &quot;^4.3.1&quot;
    }
  }
  
  </code></pre>
  <p>And <code>tsconfig.json</code>:</p>
  <pre><code>{
    &quot;compilerOptions&quot;: {
      &quot;allowJs&quot;: true,
      &quot;allowSyntheticDefaultImports&quot;: true,
      &quot;baseUrl&quot;: &quot;.&quot;,
      &quot;declaration&quot;: true,
      &quot;esModuleInterop&quot;: true,
      &quot;importHelpers&quot;: true,
      &quot;jsx&quot;: &quot;react&quot;,
      &quot;lib&quot;: [&quot;es6&quot;, &quot;dom&quot;],
      &quot;module&quot;: &quot;esnext&quot;,
      &quot;moduleResolution&quot;: &quot;node&quot;,
      &quot;noFallthroughCasesInSwitch&quot;: true,
      &quot;noImplicitAny&quot;: true,
      &quot;noImplicitReturns&quot;: true,
      &quot;noImplicitThis&quot;: true,
      &quot;noUnusedParameters&quot;: true,
      &quot;outDir&quot;: &quot;dist&quot;,
      &quot;resolveJsonModule&quot;: true,
      &quot;rootDir&quot;: &quot;.&quot;,
      &quot;skipLibCheck&quot;: true,
      &quot;sourceMap&quot;: true,
      &quot;strict&quot;: true,
      &quot;target&quot;: &quot;es6&quot;
    },
    &quot;include&quot;: [&quot;**/*.ts&quot;, &quot;**/*.tsx&quot;, &quot;**/*.jsx&quot;, &quot;**/*.js&quot;],
    &quot;exclude&quot;: [
      &quot;dist&quot;,
      &quot;node_modules&quot;
    ]
  }
  </code></pre>
  <p>And <code>setupTests.ts</code> is just: <code>import '@testing-library/jest-dom/extend-expect';</code></p>
  <p>Thanks for any pointers.</p>