Hi All,
Test cases were working with flowable forms v 3.8.x but recently all the tests are falling after upgrade in flowable forms version 3.10.x
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:\Users\username\react-app\node_modules@babel\runtime\helpers\esm\typeof.js:1
({“Object.“:function(module,exports,require,**dirname,**filename,global,jest){export default function _typeof(obj) {
^^^^^^
SyntaxError: Unexpected token 'export'
at Runtime.createScriptFromCode (../node_modules/jest-runtime/build/index.js:1350:14)
at Object.<anonymous> (../node_modules/@flowable/forms/index.js:6:327085)
at n (../node_modules/@flowable/forms/index.js:1:421)
at Module.<anonymous> (../node_modules/@flowable/forms/index.js:6:170993)
at n (../node_modules/@flowable/forms/index.js:1:421)
Package.json
{
"name": "app-test",
"version": "1.0.0",
"scripts": {
"test": "jest --runInBand --coverage",
"build": "npm run build",
},
"peerDependencies": {
"@flowable/forms": "~3.10.0",
"react": ">=16.8.0",
"react-dom": ">=16.8.0"
},
"dependencies": {
"react-icons": "^4.3.1"
},
"devDependencies": {
"@babel/core": "7.12.3",
"@babel/preset-env": "7.12.1",
"@flowable/forms": "3.10.13",
"@rollup/plugin-babel": "5.2.1",
"@rollup/plugin-commonjs": "15.1.0",
"@rollup/plugin-json": "4.1.0",
"@rollup/plugin-node-resolve": "8.4.0",
"@rollup/plugin-replace": "2.3.3",
"@rollup/plugin-typescript": "5.0.2",
"@storybook/addon-actions": "5.3.7",
"@storybook/addon-links": "5.3.7",
"@storybook/addons": "5.3.7",
"@storybook/react": "5.3.7",
"@testing-library/jest-dom": "5.11.9",
"@testing-library/react": "12.0.0",
"@testing-library/react-hooks": "^5.1.1",
"@types/jest": "26.0.19",
"@types/react-test-renderer": "16.9.4",
"@types/sortablejs": "1.10.0",
"@typescript-eslint/eslint-plugin": "4.0.1",
"@typescript-eslint/parser": "4.0.1",
"antd": "4.19.1",
"babel-jest": "26.6.3",
"babel-loader": "8.1.0",
"babel-preset-react-app": "9.1.2",
"core-js": "3.6.4",
"eslint": "7.13.0",
"eslint-html-reporter": "0.7.4",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jest": "24.1.3",
"eslint-plugin-jest-dom": "3.6.5",
"eslint-plugin-node": "11.1.0",
"eslint-plugin-promise": "4.2.1",
"eslint-plugin-react": "7.21.5",
"eslint-plugin-react-hooks": "4.2.0",
"eslint-plugin-testing-library": "3.10.0",
"glob": "7.1.6",
"identity-obj-proxy": "3.0.0",
"jest": "26.6.3",
"jest-junit": "12.0.0",
"json2yaml": "1.1.0",
"prettier": "1.19.1",
"react": "16.13.1",
"react-async": "10.0.1",
"react-dom": "16.13.1",
"react-test-renderer": "16.12.0",
"regenerator-runtime": "0.13.7",
"rollup": "2.28.2",
"rollup-plugin-node-polyfills": "^0.2.1",
"rollup-plugin-scss": "2.6.1",
"rollup-plugin-terser": "7.0.2",
"sortablejs": "1.12.0",
"typescript": "3.9.7",
"whatwg-fetch": "3.6.2"
},
"resolutions": {
"browserslist": "4.6.2",
"caniuse-lite": "1.0.30000974"
}
}
babel.config.json
{
"presets": [
[
"@babel/env"
],
[
"@babel/preset-react"
],
[
"@babel/preset-typescript"
]
],
"plugins": [
"@babel/plugin-proposal-class-properties"
],
"only": [
"src/**",
"jest.setup.js",
"node_modules/react-async/**"
]
}
jest.config.js
module.exports = {
verbose: false,
collectCoverage: true,
rootDir: './src',
coverageDirectory: '../target/coverage',
unmockedModulePathPatterns: ['node_modules/react/', 'node_modules/@babel/polyfill/'],
transformIgnorePatterns: ['node_modules/(?!(react-async))', '__mocks__/mock.js'],
reporters: [
'default',
[
'jest-junit',
{
outputDirectory: './target/test',
},
],
],
moduleNameMapper: {
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
'<rootDir>/../__mocks__/mock.js',
'\\.(css|less|scss)$': '<rootDir>/../__mocks__/mock.js',
},
setupFilesAfterEnv: ["../jest.setup.js"],
};
tsconfig.json
{
"compilerOptions": {
"jsx": "react",
"module": "esNext",
"moduleResolution": "node",
"preserveConstEnums": true,
"strict": true,
"strictFunctionTypes": false,
"target": "es5",
"sourceMap": true,
"importHelpers": true,
"resolveJsonModule": true,
"esModuleInterop": true
}
}
Can anyone please suggest changes in configuration if required? Thanks.