jest test fails: Unexpected token {

[gaborvoros]

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.

[KristianLonergan]

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.

[gaborvoros]

@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)

[chrvadala]

Could you try to remove the browser key from the package.json? Might it be an issue similar to this? https://github.com/chrvadala/react-svg-pan-zoom/issues/140#issuecomment-473384440

[KristianLonergan]

Tried removing browser key / replacing browser key with unpkg but still get the same error

[chrvadala]

@KristianLonergan It should be fixed into the develop branch. Could you check it out?

[KristianLonergan]

@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)

[chrvadala]

Since you're installing from github instead of npm you have to manually exec a build. Use this command:

yarn build

[KristianLonergan]

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.

[chrvadala]

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')
})

[chrvadala]

Fixed with v3.1 (but works also with 3.0.3)