Jest css-modules SyntaxError: Unexpected token

Question

I have set up my jest to allow static files after following their documentation on how to do so, but I still recieve the following error.

How can I can it to pass and create a snapshot.

Terminal Error

FAIL  src/components/Splash/Splash.test.js
  ● Test suite failed to run

    /var/www/com/src/components/shared/logo/_Logo.css:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){.logo {
                                                                                             ^

    SyntaxError: Unexpected token .

      3 | 
      4 | 
    > 5 | import logo from './_Logo.css';
      6 | import * as font from '../font/fontello.css';

Splash.test.js

import { shallow } from 'enzyme';
import { shallowToJson } from 'enzyme-to-json';
import Splash from './Splash';

it('Splash page is rendered', () => {
    const result = shallow(
        <Splash />,
    );

    expect(shallowToJson(result)).toMatchSnapshot();
});

Jest Config

  "jest": {
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ],
    "setupTestFrameworkScriptFile": "./node_modules/jest-enzyme/lib/index.js",
    "moduleFileExtensions": [
      "js"
    ],
    "moduleDirectories": [
      "node_modules"
    ],
    "testPathIgnorePatterns": [
      "<rootDir>/node_modules/",
      "<rootDir>/app/"
    ],
    "moduleNameMapper": {
      "moduleNameMapper": {
        "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
        "\\.(css|less)$": "identity-obj-proxy"
      }
    },
    "transform": {
      "^.+\\.js$": "babel-jest"
    }
  }

There seems to be an small mistake: moduleNameMapper: {moduleNameMapper{}} should just be moduleNameMapper:{}, also maybe running jest with --no-cache might help — Andreas Köberle
– Andreas Köberle, Commented Feb 22, 2018 at 10:30
Please add this as the answer andreas, sure its not really super helpful and rather bespoke, but it may help somebody else from not being so stupid :D — Jamie Hutber
– Jamie Hutber, Commented Feb 25, 2018 at 22:45

Oleksiï Nikonov · Accepted Answer · 2019-03-16 07:43:56Z

2

It may work who use create-react-app from feb 2018. I partially followed the docs jest webpack to make it work.

Also found out the moduleNameMapper cannot be overriden in package.json but in jest.config.js it does the trick. Unfortunately i havent found any docs about why it does but here is my answer. Here is my jest.config.js:

module.exports = {
...,
  "moduleNameMapper": {
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
    "\\.(scss|sass|css)$": "identity-obj-proxy"
  }
}

and it skips scss files and @import quite well.

I added to devDependencies identity-obj-proxy

edited Mar 16, 2019 at 7:43

answered Mar 16, 2019 at 7:29

Oleksiï Nikonov

5,6366 gold badges48 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andreas Köberle · Accepted Answer · 2018-02-25 23:04:34Z

1

There is a small mistake: moduleNameMapper: {moduleNameMapper{}} should just be moduleNameMapper:{}

"moduleNameMapper": {
  "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
  "\\.(css|less)$": "identity-obj-proxy"
}

answered Feb 25, 2018 at 23:04

Andreas Köberle

112k58 gold badges281 silver badges308 bronze badges

1 Comment

comiventor Over a year ago

for me, installing identity-obj-proxy and "\\.(css)$": "jest-css-modules" worked

Collectives™ on Stack Overflow

Jest css-modules SyntaxError: Unexpected token

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related