Importing images breaks jest test

by

When you import image files, Jest tries to interpret the binary codes of the images as .js, hence runs into errors.

The only way out is to mock a default response anytime jest sees an image import!

How do we do this?

  • first you tell Jest to run the mock file each time an image import is encountered. you do this by adding the key below to your package.json file
"jest": {
 "moduleNameMapper": {
      "\\.(jpg|ico|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/fileMock.js"
    }
}

Note: if you already have the "Jest" key, just add the "moduleNameMapper" child in it

  • lastly, create a mocks folder in your root and create fileMock.js file inside it. populate the file with the snippet below
module.exports="";

Note: If you are using es6 you can use export default ''; to avoid an Eslint flag

when you are done with the above steps, you can restart the test and you are good to go.

Note. remember to add the varying extensions of your image files in the moduleNameMapper so that they can be mocked.

I hope I have been able to help. #cheers!

More Related Contents:

  1. Why am I getting ReferenceError: self is not defined when I import a client-side library?
  2. Error: ‘node-sass’ version 5.0.0 is incompatible with ^4.0.0
  3. Support for the experimental syntax ‘classProperties’ isn’t currently enabled
  4. How to resolve “Cannot use import statement outside a module” in jest
  5. Dynamically Add Images React Webpack
  6. How to import and export components using React + ES6 + webpack?
  7. Remove console.logs with Webpack & Uglify
  8. How to tell webpack dev server to serve index.html for any route
  9. React Js require ‘fs’
  10. How to use Google fonts in React.js?
  11. How can I use Jest to spy on a method call?
  12. Testing React components that fetches data using Hooks
  13. Value of “this” is incorrect when debugging Babel transpiled React with Chrome Devtools
  14. webpack can’t find module if file named jsx
  15. How should I configure create-react-app to serve app from subdirectory?
  16. Simulate a button click in Jest
  17. How to hash CSS class names in Nextjs?
  18. How to resolve “Cannot use import statement outside a module” from Jest when running tests?
  19. Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema
  20. Jest setup “SyntaxError: Unexpected token export”
  21. How to minimize the size of webpack’s bundle?
  22. combine react build output into single js file
  23. Jest test fails : TypeError: window.matchMedia is not a function
  24. how to change jest mock function return value in each test?
  25. How to set build .env variables when running create-react-app build script?
  26. How to solve the “update was not wrapped in act()” warning in testing-library-react?
  27. How to test a react component that is dependent on useContext hook?
  28. Jest spyOn function called
  29. Webpack & Typescript image import
  30. Unable to load images from static folder

Leave a Comment