Jest can't run test with methods in .tsx file

Question

Usually I only test files that ends with .ts, but in this case I have a file with utility methods that returns a react element. So in this case my file has a .tsx extension and returns some components from material ui and other libraries.

I was getting an error saying SyntaxError: Cannot use import statement outside a module but I solved it by adding "^.+\\.(ts|js)x?$": "ts-jest" to the transform property of my jest.config.js.

But after that I got another error:

  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    C:\projetos\COM.FLOU.FrontEnd\node_modules\overlayscrollbars\css\OverlayScrollbars.css:19
    html.os-html > .os-host {
                   ^

    SyntaxError: Unexpected token '.'

jest.config.ts

import { pathsToModuleNameMapper } from "ts-jest/utils";
import { compilerOptions } from "./tsconfig.paths.json";

export default {
  coverageDirectory: "coverage/jest",
  testEnvironment: "jsdom",
  testMatch: ["**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[tj]s?(x)"],
  testPathIgnorePatterns: ["\\\\node_modules\\\\", "<rootDir>/cypress/"],
  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, { prefix: "<rootDir>/" }),
  transform: {
    "^.+\\.jsx?$": "babel-jest",
    "^.+\\.(ts|js)x?$": "ts-jest",
    ".+\\.(css|styl|less|sass|scss)$": "jest-css-modules-transform",
  },
};

babel.config.js

// babel.config.js
module.exports = {
  presets: [
    ["@babel/preset-env", { targets: { node: "current" } }],
    "@babel/preset-react",
    "@babel/preset-typescript",
  ],
  plugins: [
    [
      "@babel/plugin-transform-runtime",
      {
        regenerator: true,
      },
    ],
  ],
};

tsconfig.json

{
  "compilerOptions": {
    "noImplicitAny": true,
    "target": "es5",
    "module": "esnext",
    "jsx": "react-jsx",
    "types": [
      "jest"
    ],
    "lib": [
      "es6",
      "DOM"
    ],
    "outDir": "./dist/",
    "rootDir": "./src/",
    "sourceMap": true,
    "removeComments": true,
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "noFallthroughCasesInSwitch": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  },
  "extends": "./tsconfig.paths.json",
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "jest.config.ts"
  ]
}

Am I missing any specific configuration?

Answer 1

I solved it by adding an empty styleMock.ts file and adding it to moduleNameMapper on my jest.config.ts file.

styleMock.ts

export default {};

jest.config.ts

import { pathsToModuleNameMapper } from "ts-jest/utils";
import { compilerOptions } from "./tsconfig.paths.json";

export default {
  coverageDirectory: "coverage/jest",
  testEnvironment: "jsdom",
  testMatch: ["**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[tj]s?(x)"],
  testPathIgnorePatterns: ["\\\\node_modules\\\\", "<rootDir>/cypress/"],
  moduleNameMapper: {
    ...pathsToModuleNameMapper(compilerOptions.paths, { prefix: "<rootDir>/" }),
    "\\.(css)$": "<rootDir>/styleMock.ts",
  },
  transform: {
    "^.+\\.(ts|js)x?$": "ts-jest",
  },
};