jest unexpected token when importing css

Question

I got error of SyntaxError: Unexpected token .

in my code

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

impor         


        

Answer 1

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 2

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