jest unexpected token when importing css

Question

I got error of SyntaxError: Unexpected token .

in my code

import 'react-dates/lib/css/_datepicker.css'

import 'semantic-ui-css/semantic.min.css'

those isn't in my spec.js but my implementation code, any clue why? I have no problem running my app but jest throw error when I try to run test.

Answer 1

The problem is that Jest is hitting these CSS imports and trying to parse them as if they were JavaScript.

The "Unexpected token ." message probably comes because the first line of the file it is choking on is a CSS class declaration, i.e. .datepicker: { ... }.

Anyway, as pointed out in this answer, the way to get around this is to create a file containing a module which exports an empty object. I called mine styleMock.js.

module.exports = {};

Then, you need to create a jest.config.js file in your project root and add:

module.exports = {
  moduleNameMapper: {
    '\\.(css|less)$': '<rootDir>/test/jest/__mocks__/styleMock.js',
  }
};

The moduleNameMapper setting tells Jest how to interpret files with different extensions. In this case we simply need to point it at the empty file we just created. Obviously adjust the path to your file accordingly.

And note that you can expand the regex above for whichever file endings you need. Mine looks like:

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

where fileMock.js is identical to styleMock.js

Alternatively, you could use a module such as jest-transform-stub, which does the same thing for you.

Answer 2

For anyone hitting this question in fall 2020 or later, for an error like SyntaxError: Invalid or unexpected token when Jest parses CSS files: True, the error is due to Jest trying to parse the CSS as JavaScript, which wont work. So the updated way to handle this is 3 steps, per the Jest documentation on handling static assets, but you dont need to add an additional package like identity-obj-proxy as @chitra suggested unless you're using CSS Modules. And to contrast @james-hibbard 's suggestions: the fileMock.js now looks slightly different and you don't need to create a jest.config.js .

1 in your package.json add this

{
  "jest": {
    "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)$": "<rootDir>/__mocks__/styleMock.js"
    }
  }
}

2 Then create the following two files:

// __mocks__/styleMock.js

module.exports = {};

3

// __mocks__/fileMock.js

module.exports = 'test-file-stub';

That should fix these specific errors when Jest runs like

SyntaxError: Invalid or unexpected token
> 1 | import '../src/css/console.scss';

Answer 3

Jest doesn't works with JSX which imports CSS.

I solved this by using the moduleNameMapper key in the jest configurations in the package.json file.

{
   "jest":{
        "moduleNameMapper":{
             "\\.(css|less|scss|sass)$": "identity-obj-proxy" 
        }
   }
}

But you will need to install identity-obj-proxy package as a dev dependancy i.e.

yarn add identity-obj-proxy -D

Answer 4

Mocks

First method
You can mock imported css directly in test file.

// Component.test.js

jest.mock('react-dates/lib/css/_datepicker.css', () => '')
describe('', () => {...})

Second method
Or mock it global. Inside [root]/jest-config/mocks create two files: reactDatePicker.js and index.js

// reactDatePicker.js
/* global jest */

export default () => jest.mock('react-dates/lib/css/_datepicker.css', () => '')

// index.js
import reactDatePickerCssMock from './reactDatePicker'

reactDatePickerCssMock()

Then inside package.json

"jest": {
  "setupFilesAfterEnv": ["<rootDir>/jest-config/mocks/index.js"]
}

Answer 5

If the top answer didn't solve your problem, make sure that you put mapping in the very beginning of the array:

// does not work for CSS paths starting with ~
moduleNameMapper: {
    '^~/(.*)$': '<rootDir>/$1',
    '\\.(css|sass|scss)$': '<rootDir>/test/jest/__mocks__/styleMock.js',
}

// works
moduleNameMapper: {
    '\\.(css|sass|scss)$': '<rootDir>/test/jest/__mocks__/styleMock.js',
    '^~/(.*)$': '<rootDir>/$1',
},