Jest with TypeScript: TypeError: environment.teardown is not a function

Question

I am getting this error when I try to run my tests with Jest:

 FAIL  src/__tests__/jokeGenerator.test.tsx
  ● Test suite failed to run

    TypeError: environment.teardown is not a function

      at node_modules/jest-runner/build/run_test.js:230:25

I came across a possible solution here: How to solve TypeError: environment.teardown is not a function

But after doing what was suggested: removing my yarn.lock file, node_modules folder, removing Jest from my package.json, and reinstalling everything again with yarn--I encountered a new problem:

  ● Test suite failed to run

    TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string

      at assertPath (path.js:39:11)
      at Object.relative (path.js:1173:5)
      at Object.getCacheKey (node_modules/ts-jest/dist/utils/get-cache-key.js:15:16)

I have a hunch that the reason the previous solution worked for others was because they used create-react-app and then installed a conflicting version of jest alongside it. If that is the case, then the above solution does not apply to my problem because I did not use create-react-app.

So I reinstalled Jest and @types/jest and now have the same initial problem...

This is my webpack configuration:

module.exports = {
  entry: './src/index.tsx',
  devServer: {
    contentBase: __dirname + '/dist/',
  },
  module : {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'ts-loader'
        }
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          'style-loader',
          {
            loader: 'typings-for-css-modules-loader?modules?named',
            options: {
              modules: true,
              namedExport: true
            }
          }
        ]
      }
    ]
  }
}

This is my package.json:

{
  "name": "practice-testing",
  "private": true,
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production",
    "test": "jest"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/jest": "^23.3.1",
    "@types/react": "^16.4.9",
    "@types/react-dom": "^16.0.7",
    "babel-core": "^6.26.3",
    "babel-jest": "^23.4.2",
    "css-loader": "^1.0.0",
    "css-modules": "^0.3.0",
    "jest": "^23.5.0",
    "react-testing-library": "^5.0.0",
    "style-loader": "^0.22.1",
    "ts-jest": "^23.1.3",
    "ts-loader": "^4.4.2",
    "typescript": "^3.0.1",
    "typings-for-css-modules-loader": "^1.7.0",
    "webpack": "^4.16.5",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  },
  "dependencies": {
    "react": "^16.4.2",
    "react-dom": "^16.4.2"
  },
  "jest": {
    "testEnvironment": "node"
  }
}

This my jest config:

module.exports = {
  "roots": [
    "<rootDir>/src"
  ],
  "transform": {
    "^.+\\.tsx?$": "ts-jest"
  },
  "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
  "moduleFileExtensions": [
    "ts",
    "tsx",
    "js",
    "jsx",
    "json",
    "node"
  ],
}

And lastly, this is my tsconfig:

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "jsx": "react",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true,
    },
    "include": [
        "./src/**/*",
    ],
    "exclude": [
        "node_modules",
    ]
}

Answer 1

TLDR

This error often means there is a jest-environment-jsdom and/or jest-environment-node installed at the root of node_modules that is incompatible with the version of Jest being used to run the tests.

Details

This one was interesting.

The problem is css-modules. It has a dependency on [email protected] (that should have been under its devDependencies).

[email protected] ends up installing [email protected] and [email protected] which end up in the root of node_modules.

jest@^23.5.0 is installed which installs jest-environment-jsdom@^23.4.0 and jest-environment-node@^23.4.0 in multiple places within node_modules/jest, but not at the root level of node_modules since the 20.0.3 versions are there.

When a testEnvironment is specified for Jest, the resolve process looks for the environment. The first place it tries is within the project which in this case is resolving to the 20.0.3 versions.

Those earlier versions of the test environments do not contain everything required by later versions of Jest, including a definition for teardown().

Remove css-modules from package.json, delete your package-lock.json and/or yarn.lock and node_modules and run npm install and that should clear things up.

(Note that css-modules only has 133 weekly downloads and no listed github site, I'm guessing it was added as a dependency by mistake, it is not associated with CSS Modules)