Breaking News: Grepper is joining You.com. Read the official announcement!

vue3 jest import images with error

Aylon Spigel answered on August 31, 2022 Popularity 2/10 Helpfulness 1/10

answer vue3 jest import images with error

vue3 jest import images with error

Comment

The Error:
({"Object.":function(module,exports,require,__dirname,__filename,global,jest){�PNG
SyntaxError: Invalid or unexpected token at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:305:17)


Solution:
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.

Popularity 2/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: import javascript

Link to this answer
Share Copy Link

Contributed on Aug 31 2022

Aylon Spigel

0 Answers Avg Quality 2/10

vue3 jest import images with error

Contents

More Related Answers

vue3 jest import images with error

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.