Jest encountered an unexpected token with spin.js

[ovdncids]

FAIL src/tests/App.test.js
● 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:
 • 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:

/Volumes/Machintosh_HD2/workspace/Study/react-study/node_modules/spin.js/spin.js:79
export { Spinner };
^^^^^^

SyntaxError: Unexpected token export

> 1 | import Spinner from 'spin.js';
    | ^
  2 | import 'spin.js/spin.css';

[ovdncids]

I fixed it on temporary.

/node_modules/spin.js/spin.js at line 79
export { Spinner }; -> module.exports = Spinner;

I hope to fix it next version.

[SuperlativeEntity]

This still seems to be an issue.

[SuperlativeEntity]

For Laravel devs using mix, using mix.js... will sort out this issue

[theodorejb]

It looks like Jest may need to be configured with Babel to handle ES6 modules: jestjs/jest#2550.

[tlgreg86]

I'm having this same issue. Has anyone had any luck finding a permanent fix for this?

[ZitaNemeckova]

window.Spinner = require('spin.js'); instead of import Spinner from 'spin.js'; solved it for me. Maybe it'll help someone else.

Nevermind. It's not working.

[JCB-K]

Assuming that you don't actually need to test the internals of Spin.js, you can mock it:

in your Jest config:

moduleNameMapper": {
      "spin.js": "<rootDir>/test/__mocks__/spinMock.js",
    },

in spinMock.js:

module.exports = {};

[dasDaniel]

Mocking suggestion by @JCB-K works, and I would say that it's a better solution to mock it, but you can also try using the transform ignore

    "transformIgnorePatterns": [
      "/node_modules/(?!spin.js).+\\.js$"
    ],

[skondrashov]

I'm unable to get "transformIgnorePatterns" to work to fix this for some reason, have tried quite a few variations at this point.

EDIT: Solved it: https://stackoverflow.com/questions/50147915/jest-transformignorepatterns-not-working
Apparently a babel.config.js is required. Who'd've thought!