I've been on this problem for a full day now and I can't seem to get my Jest test to work. I think it has to do with using Material UI's TextField 'date' that uses moment.js
I'm getting the following 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:
/Users/linhlekim/Documents/Planned/entr-clients/node_modules/react-day-picker/src/moment.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export { MomentLocalUtils as default } from './addons/MomentLocaleUtils';
^^^^^^
SyntaxError: Unexpected token 'export'
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
at Object.<anonymous> (node_modules/react-day-picker/src/addons/MomentLocaleUtils.js:3:1)
I've tried several solutions online such as 1) renaming my .babelrc to babel.config.json 2) adding a pattern to my jest.config.ts
transformIgnorePatterns: [
'/node_modules/',
'/node_modules/(?!react-day-picker)',
'^.+\\.module\\.(css|sass|scss)$',
],
But nothing seems to work and I still get the same error.
My current configs are the following:
jest.config.ts
import { pathsToModuleNameMapper } from 'ts-jest/utils'
import { compilerOptions } from './tsconfig.json'
module.exports = {
preset: 'ts-jest',
moduleDirectories: [
'node_modules',
'src',
],
collectCoverageFrom: [
'**/*.{ts,tsx}',
'!**/*.d.ts',
'!**/node_modules/**',
'!**/legacy/**',
],
setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
testPathIgnorePatterns: ['/node_modules/', '/.next/', '/legacy/', '/*.test-helpers.(ts|tsx)'],
transform: {
'^.+\\.(ts|js|t|j)sx?$': 'ts-jest',
},
transformIgnorePatterns: [
'/node_modules/',
'/node_modules/(?!react-day-picker)',
'^.+\\.module\\.(css|sass|scss)$',
],
moduleNameMapper:
pathsToModuleNameMapper(compilerOptions.paths, { prefix: '<rootDir>/src/' }),
globals: {
'ts-jest': {
tsconfig: 'tsconfig.test.json',
},
},
}
tsconfig.json
{
"compileOnSave": true,
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"baseUrl": "./src",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"isolatedModules": true,
"jsx": "preserve",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"module": "esnext",
"moduleResolution": "node",
"noEmit": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"outDir": "dist",
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": false,
"target": "es5",
"paths": {
"@assets": [
"assets/index"
],
"@assets/*": [
"assets/*"
],
"@components/*": [
"components/*"
],
"@config/*": [
"config/*"
],
"@hooks/*": [
"utils/hooks/*"
],
"@inputs": [
"components/legacy/components/inputs-v2/index"
],
"@inputs/*": [
"components/legacy/components/inputs-v2/*"
],
"@legacy/*": [
"components/legacy/*"
],
"@shared/*": [
"components/shared/*"
],
"@store": [
"store/index"
],
"@store/*": [
"store/*"
],
"@styles/*": [
"components/legacy/styles/*"
],
"@utils/*": [
"utils/*"
]
}
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/custom.d.ts",
"src/global.d.ts",
"src/utilities.d.ts"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
package.json
"devDependencies": {
"@babel/core": "^7.12.16",
"@storybook/addon-actions": "^6.1.21",
"@storybook/addon-controls": "^6.1.21",
"@storybook/addon-essentials": "^6.1.21",
"@storybook/addon-links": "^6.1.21",
"@storybook/react": "^6.1.21",
"@testing-library/jest-dom": "^5.11.9",
"@testing-library/react": "^11.2.5",
"@types/algoliasearch": "^3.34.10",
"@types/chai": "^4.2.15",
"@types/cypress": "^1.1.3",
"@types/jest": "^26.0.20",
"@types/lodash": "^4.14.153",
"@types/mixpanel-browser": "^2.35.3",
"@types/mocha": "^8.2.1",
"@types/react": "^16.9.23",
"@types/react-dom": "^16.9.5",
"@types/react-geosuggest": "^2.7.10",
"@types/react-imgix": "^9.0.3",
"@types/react-inlinesvg": "^1.0.0",
"@types/react-instantsearch-core": "^6.3.1",
"@types/react-instantsearch-dom": "^6.3.0",
"@types/react-redux": "^7.1.9",
"@types/react-toggle": "^4.0.2",
"@types/segment-analytics": "0.0.33",
"@types/styled-components": "^5.0.1",
"@typescript-eslint/eslint-plugin": "^4.9.0",
"@typescript-eslint/parser": "^4.9.0",
"acorn": "^6.4.1",
"babel-loader": "^8.2.2",
"babel-plugin-styled-components": "^1.10.7",
"core-js": "^3.8.3",
"cypress": "^6.7.1",
"eslint": "^7.14.0",
"eslint-config-standard": "^14.1.0",
"eslint-plugin-cypress": "^2.10.3",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1",
"eslint-plugin-testing-library": "^3.10.2",
"eslint-watch": "^6.0.1",
"jest": "^26.6.3",
"node": "^12.20.0",
"npm-run-all": "^4.1.5",
"react-inlinesvg": "^0.8.3",
"react-intl-translations-manager": "^5.0.3",
"redux-mock-store": "^1.5.4",
"rimraf": "^2.5.4",
"standard": "^12.0.1",
"storybook-addon-designs": "^5.4.5",
"ts-jest": "^26.5.3",
"typescript": "^3.9.3",
"url-loader": "^1.1.2",
"vercel": "^21.1.0"
},
any help would be greatly appreciated!
