Jest Tests will break if component imports an image

[kyleshevlin]

Recently added an image import to the Logo component and broke the test for the component. Why?

When Jest attempts to import the file, it does not know what to do with the binary file. These files are unnecessary for tests and should be mocked. I fixed it by adding the following to the config in jest.config.js:

moduleNameMapper: {
  // Maps the import of various images to a mock file path
  '^.+\\.(jpg|jpeg|png|gif|webp|svg)$': '<rootDir>/__mocks__/fileMock.js',
}

You then must also create a /__mocks__/fileMock.js file with the following:

module.exports = '/test-file-stub';

Useful Resources

• https://stackoverflow.com/questions/46898638/importing-images-breaks-jest-test
• https://nextjs.org/docs/testing#manual-setup-1