jest unexpected token when importing css

by

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.

More Related Contents:

  1. How to mock functions in the same module using Jest?
  2. How can I mock an ES6 module import using Jest?
  3. How do I test axios in Jest?
  4. Jest mock inner function
  5. How can I mock the JavaScript window object using Jest?
  6. Mocking globals in Jest
  7. Jest: How to mock one specific method of a class
  8. Can you write async tests that expect toThrow?
  9. How to change mock implementation on a per single test basis?
  10. Message “Async callback was not invoked within the 5000 ms timeout specified by jest.setTimeout”
  11. How to test the type of a thrown exception in Jest
  12. How can I use Jest to spy on a method call?
  13. How to mock a constructor like new Date()
  14. How to change the behaviour of a mocked import?
  15. Simulate a button click in Jest
  16. how to reset module imported between tests
  17. How do I set a mock date in Jest?
  18. What functions should I mock during unit testing
  19. How to mock Axios with Jest?
  20. Jest: how to mock console when it is used by a third-party-library?
  21. How to mock dependencies for unit tests with ES6 Modules
  22. Jest – SyntaxError: Cannot use import statement outside a module
  23. Mock inner axios.create()
  24. Remove logging the origin line in Jest
  25. Mocking dayjs extend
  26. Jest spyOn function called
  27. How to mock React component methods with jest and enzyme
  28. Jest matcher to match any one of three values
  29. Is it possible to put test files under pages directory in Next.js?
  30. XMLHttpRequest testing in Jest

Leave a Comment