jest test fails: Unexpected token {
gaborvoros opened this issue · comments
Hi,
I get an error message while performing tests in jest. jest version 23.6.0:
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:
• 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:
...
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { tipNoViewer } from "./migration-tips";
^
SyntaxError: Unexpected token {
3 | import { Box, Button, Heading } from 'grommet';
4 | import FloorSelect from './FloorSelect';
> 5 | import { INITIAL_VALUE, ReactSVGPanZoom } from 'react-svg-pan-zoom/build-es'
I had to use the "build-es", because of production build, but the test fails even with the normal import.
I used create-react-app and ejected it. Here the package.json setup:
{
"name": "...",
"version": "0.1.0",
"private": true,
"devDependencies": {
"@storybook/addon-actions": "^5.0.1",
"@storybook/addon-links": "^5.0.1",
"@storybook/react": "^5.0.1",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.11.2",
"jest-localstorage-mock": "^2.4.0"
},
"dependencies": {
"@babel/core": "7.2.2",
"@svgr/webpack": "4.1.0",
"axios": "^0.18.0",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "9.0.0",
"babel-jest": "23.6.0",
"babel-loader": "8.0.5",
"babel-plugin-named-asset-import": "^0.3.1",
"babel-preset-react-app": "^7.0.2",
"bfj": "6.1.1",
"case-sensitive-paths-webpack-plugin": "2.2.0",
"css-loader": "1.0.0",
"dotenv": "6.0.0",
"dotenv-expand": "4.2.0",
"eslint": "5.12.0",
"eslint-config-react-app": "^3.0.8",
"eslint-loader": "2.1.1",
"eslint-plugin-flowtype": "2.50.1",
"eslint-plugin-import": "2.14.0",
"eslint-plugin-jsx-a11y": "6.1.2",
"eslint-plugin-react": "7.12.4",
"file-loader": "2.0.0",
"fs-extra": "7.0.1",
"grommet": "^2.5.5",
"grommet-icons": "^4.2.0",
"html-webpack-plugin": "4.0.0-alpha.2",
"identity-obj-proxy": "3.0.0",
"jest": "23.6.0",
"jest-pnp-resolver": "1.0.2",
"jest-resolve": "23.6.0",
"jest-watch-typeahead": "^0.2.1",
"mini-css-extract-plugin": "0.5.0",
"mobx": "^5.9.0",
"mobx-react": "^5.4.3",
"optimize-css-assets-webpack-plugin": "5.0.1",
"pnp-webpack-plugin": "1.2.1",
"polished": "^3.0.3",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-preset-env": "6.5.0",
"postcss-safe-parser": "4.0.1",
"react": "^16.8.4",
"react-app-polyfill": "^0.2.2",
"react-dev-utils": "^8.0.0",
"react-dom": "^16.8.4",
"react-idle-timer": "^4.2.3",
"react-svg-pan-zoom": "^3.0.3",
"react-validation": "^3.0.7",
"resolve": "1.10.0",
"sass-loader": "7.1.0",
"style-loader": "0.23.1",
"styled-components": "^4.1.3",
"terser-webpack-plugin": "1.2.2",
"url-loader": "1.1.2",
"validator": "^10.11.0",
"webpack": "4.28.3",
"webpack-dev-server": "3.1.14",
"webpack-manifest-plugin": "2.0.4",
"workbox-webpack-plugin": "3.6.3"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js",
"storybook": "start-storybook -p 9009 -s public",
"build-storybook": "build-storybook -s public"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"jest": {
"collectCoverageFrom": [
"src//*.{js,jsx,ts,tsx}",
"!src//.d.ts"
],
"setupFiles": [
"jest-localstorage-mock"
],
"testMatch": [
"/tests/**/.{js,jsx,mjs}",
"/src//tests//.{js,jsx,mjs}",
"/src/**/?(.)(spec|test).{js,jsx,mjs}"
],
"testEnvironment": "node",
"testURL": "http://localhost:3000",
"transform": {
"^.+\.(js|jsx|mjs)$": "/node_modules/babel-jest",
"^.+\.css$": "/config/jest/cssTransform.js",
"^(?!.*\.(js|jsx|mjs|css|json)$)": "/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\]node_modules[/\\].+\.(js|jsx|mjs)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web"
},
"moduleFileExtensions": [
"web.js",
"js",
"json",
"web.jsx",
"jsx",
"node",
"mjs"
],
"setupTestFrameworkScriptFile": "/tests/testConfig.js"
},
"babel": {
"presets": [
"react-app"
]
}
}
Do you have a workaround for this issue, or a sample setup for jest and babel?
I also tried jest 24.7.0, with the same error.
I am also hitting the exact same issue when I am trying to run my tests.
I have tried out a couple of different fixes but to no avail.
For some reason when I empty out the index.js file in my node modules (node_modules\react-svg-pan-zoom\build-commonjs) the error seems to go away and I can run all of my tests.
It's a temporary workaround anyway to get my tests to run.
@KristianLonergan sounds great.
My quick workaround was to copy all files from the node_modules\react-svg-pan-zoom\build-es folder into my project\src\components\svg folder.
I had to edit the files, by moving the import statements to the top of the files, and instead importing the plugin from node_modules, I imported it from this new folder.
My tests run now clear and building the project works as well, but please note, this is just a temporary workaround as updates are not possible (only by manually copying the files again)
Could you try to remove the browser key from the package.json?
Might it be an issue similar to this? #140 (comment)
Tried removing browser key / replacing browser key with unpkg but still get the same error
@KristianLonergan It should be fixed into the develop branch. Could you check it out?
@chrvadala thanks for looking into the issue but now hit an issue where the module cannot be found while running my tests:
FAIL src/components/test/SvgMap.test.js
● Test suite failed to run
Cannot find module 'react-svg-pan-zoom' from 'SvgMap.js'
2 | import Toolbar from './SvgToolBar';
3 | import {AutoSizer} from 'react-virtualized';
> 4 | import {fitToViewer, INITIAL_VALUE, ReactSVGPanZoom, zoomOnViewerCenter} from 'react-svg-pan-zoom';
| ^
5 | import '../css/MapPanel.css';
6 |
7 | class SvgMap extends React.Component {
at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:221:17)
at Object.<anonymous> (src/components/SvgMap/SvgMap.js:4:1)
Since you're installing from github instead of npm you have to manually exec a build.
Use this command:
yarn build
Thanks for the quick reply,
I tried running a build using: npm run build and I get the following error similar to the test error:
Failed to compile.
.\src\components\SvgMap\SvgMap.js
Cannot find module: 'react-svg-pan-zoom'. Make sure this package is installed.
You can install this package by running: yarn add react-svg-pan-zoom.
I also tried switching to yarn but get the exact same issue/error.
I removed my node_modules and re-installed all my packages and my app runs fine I can see the svg-pan-zoom component but executing build does not work.
I was able to reproduce it. Since react-svg-pan-zoom v3 uses babel preset-env feature, it seems that jest requires a babel.config.js file on your project root.
I fixed the issue adding this file
<PROJECT_DIR>/babel.config.js
module.exports = {
presets: [
['@babel/preset-env', {targets: {node: 'current'}}],
],
};Anyway the next version (3.1.0) is going to have some build improvements, but I was able to fix the jest integration also with the current version (3.0.3)
Just for reference, this was the jest file used in my test:
import {ACTION_PAN} from 'react-svg-pan-zoom'
test("test", () => {
expect(10).toBe(10)
expect(ACTION_PAN).toBe('pan')
})Fixed with v3.1 (but works also with 3.0.3)