Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

339
Vistas
Jest - unable to import image when using mock

I am trying to import an JPEG Image in ContactListItem.tsx.

import React from "react";
import { render, screen, RenderResult } from "@testing-library/react";
import userEvent from "@testing-library/user-event";

import ContactListItem from "./index";

import Avatar from "src/assets/icons/avatar_1.jpeg";

describe("Testing ContactListItem component", () => {...});

I've got an error

 Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

enter image description here

But I've already created fileMock for transforming in jest.config.ts

export default {
  roots: ["<rootDir>/src"],
  moduleFileExtensions: ["ts", "tsx", "js", "json", "node"],
  moduleDirectories: ["node_modules", "src"],
  moduleNameMapper: {
    "src/(.*)": "<rootDir>/src/$1",
    "^.+\\.(png|jpg|jpeg|gif|webp|ico|bmp|svg)$/i":
      "<rootDir>/src/tests/__mocks__/fileMock.js",
    "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",
  },
  testEnvironment: "jsdom",
  transform: {
    "^.+\\.tsx?$": "ts-jest",
  },
  transformIgnorePatterns: ["<rootDir>/node_modules/"],
};

file.mock.js

module.exports = `test-file-stub`;

My project hierarchy:

-public
-src
  -components
    -ContactListItem
      -index.tsx
      -ContactListItem.test.tsx
  -tests
    -__mocks__
      -file.mock.js
-jest.config.ts
about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda