SyntaxError with Jest and React and importing CSS files

by

moduleNameMapper is the setting that tells Jest how to interpret files with different extension. You need to tell it how to handle Less files.

Create a file like this in your project (you can use a different name or path if you’d like):

config/CSSStub.js

module.exports = {};

This stub is the module we will tell Jest to use instead of CSS or Less files. Then change moduleNameMapper setting and add this line to its object to use it:

'^.+\\.(css|less)$': '<rootDir>/config/CSSStub.js'

Now Jest will treat any CSS or Less file as a module exporting an empty object. You can do something else too—for example, if you use CSS Modules, you can use a Proxy so every import returns the imported property name.

Read more in this guide.

More Related Contents:

  1. How to resolve “Cannot use import statement outside a module” in jest
  2. How to resolve “Cannot use import statement outside a module” from Jest when running tests?
  3. jest: Test suite failed to run, SyntaxError: Unexpected token import
  4. How to make Jest wait for all asynchronous code to finish execution before expecting an assertion
  5. Support for the experimental syntax ‘classProperties’ isn’t currently enabled
  6. Unexpected token ‘=’ in React Component [duplicate]
  7. Differences between creating a new class to using export const
  8. Remove console.logs with Webpack & Uglify
  9. Requires Babel “7.0.0-0” but was loaded with “6.26.3”
  10. Testing React components that fetches data using Hooks
  11. Recommended approach for route-based tests within routes of react-router
  12. Service mocked with Jest causes “The module factory of jest.mock() is not allowed to reference any out-of-scope variables” error
  13. Jest setup “SyntaxError: Unexpected token export”
  14. Jest test fails : TypeError: window.matchMedia is not a function
  15. how to change jest mock function return value in each test?
  16. How to solve the “update was not wrapped in act()” warning in testing-library-react?
  17. How do I set a timezone in my Jest config?
  18. How to test a react component that is dependent on useContext hook?
  19. Importing images breaks jest test
  20. How to test Async Storage with Jest?
  21. import a module from node_modules with babel but failed
  22. Preset files are not allowed to export objects
  23. Is it possible to use if…else… statement in React render function?
  24. React.createElement: type is invalid — expected a string
  25. What is use of curly braces in an ES6 import statement?
  26. react setState with dynamic key
  27. Unable to use Arrow functions inside React component class [duplicate]
  28. How can I use Jest to spy on a method call?
  29. How do I load a markdown file into a react component?
  30. Invariant Violation: The navigation prop is missing for this navigator

Leave a Comment