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;
};