How can I test swiper with Jest? - jestjs

Question

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?

Answer 1

I suppose you are having issues with Swiper 7 or newer versions 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 swiper#6.8.4
And import it this way:
import { Swiper, SwiperSlide } from 'swiper/react'
import 'swiper/swiper-bundle.min.css'
import 'swiper/swiper.min.css'

Answer 2

This seemed to work for me (Swiper v8):
(in package.json)
"jest": {
"moduleNameMapper": {
"swiper/react": "swiper/react/swiper-react.js",
"swiper/css": "swiper/swiper.min.css"
},
"transform": {
"^.+\\.css$": "jest-transform-css"
}
}
(and maybe also add this to transformIgnorePatterns)
'node_modules/(?!(swiper|ssr-window|dom7)/)'

Answer 3

If you don't care about testing Swiper v8 functionality, but want to test some other features in your components, try to add this line in your jest file:
jest.mock('Swiper', () => class Mocked {});
Worked for nextjs, doesn't complain. Maybe not the best way, but in my case it's more than enough.

Answer 4

I'm using Swiper 8.4.2 and this worked for me while using Swiper in Jest.
TL;DR just give me the Jest config
Here is a configuration that worked for me.
/* eslint-disable */
export default {
displayName: "components",
preset: "../../jest.preset.js",
moduleNameMapper: {
// Jest cannot understand this swiper import so we tell it where this points to
"swiper/css": "swiper/swiper.min.css",
},
transform: {
"^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "#nrwl/react/plugins/jest",
"^.+\\.[tj]sx?$": ["babel-jest", { presets: ["#nrwl/react/babel"] }],
},
moduleFileExtensions: ["ts", "tsx", "js", "jsx"],
coverageDirectory: "../../coverage/libs/components",
setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
transformIgnorePatterns: ["node_modules/(?!swiper|ssr-window|dom7)"],
};
Important things about config
Some of the things can be ignored because they are specific to this NX controlled monorepo, but couple of things are important here. So ignore "nrwl" and "nx" specifics, because I'm expecting this part about transformers to already be configured for your project whether you are using NX or something else.
What errors was I getting?
So running tests first threw errors "Jest encountered an unexpected token" and "SyntaxError: Unexpected token 'export'" for this line in my code:
import { Navigation } from "swiper";
Actual source of the error was this line in Swiper package:
export { default as Swiper, default } from './core/core.js';
Adding swiper|ssr-window|dom7 to transformIgnorePatterns resolved that issue.
Then after adding that I got the same error, but for this line:
import "swiper/css";
One of the answers above managed to help me with this actually because it involved "moduleNameMapper" property.
So adding this into the config solved the issue with this particular import:
moduleNameMapper: {
// Jest cannot understand this swiper import so we tell it where this points to
"swiper/css": "swiper/swiper.min.css",
},
Hopefully this helps someone with resolving their issue and actually understanding what parts of the config resolved specific issues.