'I can't import testing-library/react in my project

I am trying to write tests using @testing-library/react in my create-react-app with Typescript, but for some reason the module does not seem to import:

enter image description here

Even my editor complains:

enter image description here

The error reads:

Could not find a declaration file for module '@testing-library/react'. '/home/dbugger/projects/foo/node_modules/@testing-library/react/dist/index.js' implicitly has an 'any' type.

Why is this happening?

Configuration files

This is my tsconfig.json file:

{
  "compilerOptions": {
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "noUnusedLocals": false
  },
  "include": [
    "src"
  ]
}

my jest.config.js

module.exports = {
  testMatch: ['**/__tests__/**/*.(spec|test|feature).(js|ts|tsx)'],
  testTimeout: 30000,
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': '<rootDir>/node_modules/babel-jest',
  },
  setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
  testEnvironment: 'jest-environment-jsdom',
  testPathIgnorePatterns: ['src/styles/'],
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/__mocks__/fileMock.js',
    '\\.(css|less|scss|sass)$': '<rootDir>/__mocks__/styleMock.js',
  },
};

and my package.json:

{
  "name": "abf_frontend",
  "version": "2.0.0",
  "private": true,
  "dependencies": {
    "@date-io/moment": "^1.3.13",
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.3.0",
    "@material-ui/pickers": "^3.3.10",
    "@mui/material": "^5.2.7",
    "@nordlb-ui/nukular": "3.9.2",
    "@reduxjs/toolkit": "^1.7.1",
    "chart.js": "^2.9.3",
    "classnames": "^2.2.6",
    "env-cmd": "^10.1.0",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-react": "^7.28.0",
    "history": "^4.10.1",
    "lodash": "^4.17.21",
    "moment": "^2.29.1",
    "oidc-client": "^1.10.1",
    "ramda": "0.28.0",
    "react": "^17.0.1",
    "react-chartjs-2": "^2.10.0",
    "react-dom": "^17.0.1",
    "react-download-link": "^2.3.0",
    "react-hook-form": "^6.0.2",
    "react-redux": "^7.2.0",
    "react-resize-detector": "^6.7.7",
    "react-router-dom": "^5.3.0",
    "react-scripts": "3.4.1",
    "react-select": "^4.3.0",
    "redux-devtools-extension": "^2.13.8",
    "redux-saga": "1.1.3",
    "redux-saga-test-plan": "^4.0.4",
    "shortid": "^2.2.16",
    "typed-redux-saga": "1.3.1"
  },
  "peerDependencies": {
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.16.7",
    "@babel/plugin-syntax-jsx": "^7.16.7",
    "@babel/preset-typescript": "7.16.7",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "@types/jest": "^26.0.0",
    "@types/lodash": "^4.14.178",
    "@types/node": "^14.18.5",
    "@types/node-sass": "^4.11.1",
    "@types/ramda": "0.27.64",
    "@types/react": "^17.0.38",
    "@types/react-dom": "^17.0.0",
    "@types/react-redux": "^7.1.21",
    "@types/react-resize-detector": "^5.0.0",
    "@types/react-router-dom": "^5.1.5",
    "@types/react-select": "^4.0.15",
    "@types/reapop": "^1.1.5",
    "@types/testing-library__jest-dom": "^5.9.1",
    "@types/testing-library__react": "^10.0.1",
    "babel-jest": "27.0.6",
    "babel-preset-react-app": "^10.0.1",
    "cypress": "^9.4.1",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-prettier": "^3.1.4",
    "jest": "27.0.6",
    "jest-dom": "4.0.0",
    "node-sass": "^4.14.1",
    "prettier": "^2.0.5",
    "ts-jest": "^27.1.4",
    "typescript": "^4.5.4",
    "watch": "1.0.2"
  },
  "scripts": {
    "start": "env-cmd -f .env.local react-scripts start",
    "build": "react-scripts build",
    "build:test": "env-cmd -f .env.azure-test react-scripts build",
    "build:dev": "env-cmd -f .env.azure-dev react-scripts build",
    "build:qa": "env-cmd -f .env.azure-qa react-scripts build",
    "build:prep-external": "env-cmd -f .env.prep-external react-scripts build",
    "build:prep-internal": "env-cmd -f .env.prep-internal react-scripts build",
    "build:prod-external": "env-cmd -f .env.prod-external react-scripts build",
    "build:prod-internal": "env-cmd -f .env.prod-internal react-scripts build",
    "test": "jest --watch",
    "eject": "react-scripts eject",
    "cypress": "cypress open"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source