I am importing a static image in a component from a folder and getting the error while writing unit test using jest and react testing library.
Error while running jest.config.js script
● Test suite failed to run
C:\Users\uttka\OneDrive\Desktop\ssr\kolo-ssr\src\static\kolo_icon.webp:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){RIFF�(
SyntaxError: Invalid or unexpected token
1 | import React from "react";
> 2 | import icon from "../../static/kolo_icon.webp";
| ^
3 | function Header() {
4 | return (
5 | <>
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
at Object.<anonymous> (src/client/components/Header.js:2:1)
The jest.config.js file :
module.export = {
verbose: true,
// roots: ['<rootDir>/src'],
transform: {
'\\.(js|jsx)?$': 'babel-jest',
},
testMatch: ['<rootDir>/src/client/**/>(*.)test.{js, jsx}'], // finds test
moduleNameMapper: {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": '<rootDir>/__mocks__/fileMock.js',
"\\.(css|less)$": "identity-obj-proxy"
},
moduleFileExtensions: ['js', 'jsx', 'json', 'node'],
testPathIgnorePatterns: ['/node_modules/', '/public/', '/build/'],
setupFilesAfterEnv: [
'@testing-library/jest-dom/extend-expect',
'@testing-library/react/cleanup-after-each',
]};
And the Header.test.js file is :
import "@testing-library/jest-dom/extend-expect";
import React from "react";
import { render, screen } from '@testing-library/react';
import Header from '../Header'
test("Header test", () => {
render(<Header />);
const kolo_icon = screen.getByAltText('Home icon');
expect(kolo_icon).toHaveAttribute('src', 'icon.webp');
});
The component Header.js
import React from "react";
import icon from "../../static/kolo_icon.webp";
function Header() {
return (
<div className="col-4">
<a href="/" title="App image">
<img
src={icon}
width={64}
height={64}
alt="Home icon"
/>
</a>
</div>
);
}
I am getting error while running the test script stated above on importing the logo from the static folder.
what am I missing?