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

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",
},
};