[SOLVED] Jest doesn't recognize require syntax to import local images with Parcel

Jest doesn't recognize require syntax to import local images with Parcel

I have <img src={require("../images/no-user-image.gif")} alt="" /> in one of my React components and it completely breaks my jest test.

I am using Parcel so this is why I am using require syntax.

Any ideas how to fix this?

This import syntax for Parcel 2 that I have found online doesn't work import image from 'url:../images/no-user-image.png'; even when I changed the image to png. It says Unable to resolve path to module

When I use import image from "../images/no-user-image.png"; this syntax which works if I set up .parcelrc file I am still getting Jest encountered an unexpected token error.

Details -> ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){�PNG

Solution

I had the same issue with image and audio files while using parcel 2.x. (It seems to work fine with CRA and the default web-pack setup.) But with parcel jest doesn't seem to know what to do with static files unless we tell it.

Handling Static Assets info from the docs is helpful.

Here is what worked for me:

//jest.config.js
module.exports = {
  ...
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
    'jest-transform-stub',
  },
  ...
};

jest-transform-stub is required npm install --save-dev jest-transform-stub