Jest encountered an unexpected token with SwiperJs - reactjs

Question

I am creating some snapshot testing with jest. It gives me error with SwiperJs.
In my test i just want to have snapshot that renders component. I also have a single feature component which renders a feature comes from static data. Its test is passing without problem.
When i run test it gives me that eror.
SyntaxError: Unexpected token 'export'
> 2 | import { Swiper, SwiperSlide } from 'swiper/react';
Features.jsx
import { Link } from 'react-router-dom';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination } from 'swiper';
import featuresData from '../../data/featuresData';
import Feature from './Feature';
import illustration from '../../assets/features-illustration.svg';
import star from '../../assets/star.svg';
const Features = () => {
return (
////rest of the component
<Swiper
pagination={{
clickable: true,
}}
modules={[Pagination]}
>
///rest of the swiper
)
}
Features.test.jsx:
import renderer from 'react-test-renderer';
import Features from '../Features';
describe('Features', () => {
it('renders correctly', () => {
const tree = renderer.create(<Features />).toJSON();
expect(tree).toMatchSnapshot();
});
});
I installed jest packages with :
yarn add --dev jest babel-jest #babel/preset-env #babel/preset-react react-test-renderer

Answer 1

The solution for me was to introduce the following into my jest configuration file:
module.exports = {
// ...
transformIgnorePatterns: ['node_modules/(?!(swiper|ssr-window))']
}
Depending on your setup this may differ. In my case I'm extending a config provided by a framework, so all we needed was the above, however see here for a more detailed configuration.