Jest encountered an unexpected token with SwiperJs

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

Does this answer your question? [Jest: test components with ESM dependencies](https://stackoverflow.com/questions/71999112/jest-test-components-with-esm-dependencies) — Brad Adams, Feb 04 '23 at 00:37

score 0 · Answer 1 · answered Feb 04 '23 at 00:36

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.

Jest encountered an unexpected token with SwiperJs

1 Answers1