Importing static assets in react testing library not working

Viewed 450

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?

0 Answers
Related