'How can I test swiper with Jest?

I'm creating unit testing of Swiper using Jest.

Here is my code:

https://codesandbox.io/s/swiper-default-react-forked-v0dnz?file=/src/App.test.jsx

● Test suite failed to run

    Cannot find module 'swiper/react' from 'src/App.jsx'

    Require stack:
      src/App.jsx
      src/App.test.jsx

      1 | import React from "react";
      2 | // Import Swiper React components
    > 3 | import { Swiper, SwiperSlide } from "swiper/react";
        | ^
      4 |
      5 | // Import Swiper styles
      6 | import "swiper/css";

      at Resolver.resolveModule (node_modules/jest-resolve/build/resolver.js:322:11)
      at Object.<anonymous> (src/App.jsx:3:1)

This error has been reported all the time, but the program can run normally. Can anyone help me solve this problem?



Solution 1:[1]

I suppose you are having issues with Swiper 7 because Jest doesn't support ESM packages yet.

So even if it is not the most optimal solution, you can solve it by downgrading it to Swiper 6

Run these commands:

npm uninstall swiper
npm install [email protected]

And import it this way:

import { Swiper, SwiperSlide } from 'swiper/react'
import 'swiper/swiper-bundle.min.css'
import 'swiper/swiper.min.css'

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1