Testing Swiper components

[LexSava]

Hi. I am using next v11.1.2, swiper ^ 7.2.0.
Swiper works fine in the application itself, but when writing tests, Jest cannot find the component import {Swiper, SwiperSlide} from 'swiper / react';
How to solve this problem?

[anisorigin]

check out my answer to the other question about testing swiper components, let me know if that fixes it:

#4969 (comment)

[subhasishnathAxelerant]

@LexSava did you find any solution for this?

[LexSava]

I still haven't found a solution to this problem, but I haven't tried to fix it in a long time.

[Rustammio]

Hey having the same issue have you fond a solution?

[LexSava]

I still haven't found a solution to this problem, but I haven't tried to fix it in a long time.

[ChazUK]

Also unable to run tests with this. React 18, Next.js 12, Swiper 8, Jest 27

[Rustammio]

module.exports = async () => ({ transformIgnorePatterns: ['/node_modules/(?!(swiper|ssr-window|dom7))'] });

[Rustammio]

and In package.json you need to add the following
"jest": {
"watchPathIgnorePatterns": [
"node_modules",
".jest-test-results.json"
],
"transformIgnorePatterns": [
"/node_modules/(?!(swiper|ssr-window|dom7))"
]
}

[ChazUK]

I've just created a test repo and confirm that with those additions it is still not passing https://github.com/ChazUK/nextjs-swiper-jest

with-jest-app/node_modules/swiper/swiper.esm.js:13
    export { default as Swiper, default } from './core/core.js';
    ^^^^^^

    SyntaxError: Unexpected token 'export'

[orchidenver]

I've just created a test repo and confirm that with those additions it is still not passing https://github.com/ChazUK/nextjs-swiper-jest

with-jest-app/node_modules/swiper/swiper.esm.js:13
    export { default as Swiper, default } from './core/core.js';
    ^^^^^^

    SyntaxError: Unexpected token 'export'

Hi, mate! Have you found a solution?

[KrzysztofZawisla]

@orchidenver

You have to override nextjs-jest config like this

// jest.config.ts
const configCreator = createJestConfig(configToOverride);
export default async () => {
  const config = await configCreator();
  const transformedConfig = {
    ...config,
    transformIgnorePatterns: ["node_modules/(?!swiper|ssr-window|dom7).*/"],
  };
  return transformedConfig;
};

[dmitryshelomanov]

Solution for Swiper v10+ (ESM-only)

Since Swiper v10 is ESM-only, Jest can't resolve its modules directly. The workaround is to redirect all swiper and swiper/* imports to a single mock file using moduleNameMapper.

1. Create a mock file (mocks/swiper.js):

const Swiper = jest.fn(() => null);
Swiper.use = jest.fn();

const SwiperSlide = jest.fn(() => null);

// Mocks for swiper/modules
const Navigation = {};
const Pagination = {};
const Virtual = {};
const Scrollbar = {};
const Autoplay = {};
const EffectFade = {};

module.exports = {
  __esModule: true,
  default: Swiper,
  Swiper,
  SwiperSlide,
  Navigation,
  Pagination,
  Virtual,
  Scrollbar,
  Autoplay,
  EffectFade,
};

2. Update jest.config.js:

moduleNameMapper: {
  "^swiper$": "<rootDir>/mocks/swiper.js",
  "^swiper/(.*)$": "<rootDir>/mocks/swiper.js",
}

This ensures that any import from swiper, swiper/react, swiper/modules, etc., is replaced with the mock — avoiding ESM resolution issues in Jest.