Jest: test components with ESM dependencies

Question

I have the following component:

App.js

import React from "react";
import { Slider } from "./Slider";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Slider />
      </header>
    </div>
  );
}

export { App };

Slider.jsx

import {Virtual, Navigation} from 'swiper';
import {Swiper, SwiperSlide} from 'swiper/react';


export const Slider = ({meetings = []}) => {
  const rerenderSwiperKey = useMemo(() => Date.now(), [meetings.length]);
  const lessThanThree = meetings.length < 3;
  const lessThanTwo = meetings.length < 2;
  return (
    <Swiper
      key={rerenderSwiperKey}
      navigation={{
        nextEl: '.swiper-button.next',
        prevEl: '.swiper-button.prev',
      }}
      spaceBetween={24}
      slidesPerView={3}
      simulateTouch={false}
      breakpoints={{
        0: {
          slidesPerView: 1,
        },
        900: {
          slidesPerView: lessThanTwo ? 1 : 2,
        },
        1200: {
          slidesPerView: lessThanThree ? (lessThanTwo ? 1 : 2) : 3,
        },
      }}
      modules={[Virtual, Navigation]}
      virtual>
      {meetings.map((meeting, index) => (
        <SwiperSlide key={meeting.id} virtualIndex={index}>
          <Slide>{meeting}</Slide>
        </SwiperSlide>
      ))}
    </Swiper>
  );
}

Then I have the following test file:

App.test.js

import React from "react";
import { shallow } from "enzyme";
import { App } from "../../App";
import { Slider } from "../../Slider";

describe("App page", () => {
  it("render: learn react link", () => {
    const component = shallow(<App />);
    const buttons = component.find(Slider);

    expect(buttons.length).toBe(1);
  });
});

and the following configuration jest.config.js:

const { defaults } = require("jest-config");

module.exports = {
  moduleFileExtensions: [...defaults.moduleFileExtensions, "js"],
  setupFiles: ["<rootDir>/src/__test__/setupTests.js"],
  setupFilesAfterEnv: ["<rootDir>/src/__test__/setupTestsAfterEnv.js"],
  testPathIgnorePatterns: ["<rootDir>/node_modules/"],
  moduleNameMapper: {
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
      "./__mocks__/fileMock.js",
  },
};

The issue is that: when I run yarn test - it produces the following error:

~/Downloads/jest-esm-issue/node_modules/swiper/swiper.esm.js:13
    export { default as Swiper, default } from './core/core.js';
    ^^^^^^

    SyntaxError: Unexpected token 'export'

    > 1 | import {Virtual, Navigation} from 'swiper';
        | ^

Could somebody help me understand how to fix it? Here is a demo example project https://github.com/DaveLomber/jest-esm-issue

Does this answer your question? [Jest - SyntaxError: Cannot use import statement outside a module](https://stackoverflow.com/questions/59879689/jest-syntaxerror-cannot-use-import-statement-outside-a-module) — evolutionxbox, Apr 25 '22 at 11:55
My guess is that this has something to do with webpack, as well. Did you use creat-react-app or do you have your own webpack config file? — sesamechicken, Apr 25 '22 at 14:46

score 4 · Answer 1 · answered Apr 25 '22 at 19:41

Apparently this has to do with a workaround for the swiper lib you're using. Reference: https://swiperjs.com/react#usage-with-create-react-app

In slider.jsx, import swiper using a direct import

import {Swiper, SwiperSlide} from 'swiper/react/swiper-react.js';
// ref: https://swiperjs.com/react#usage-with-create-react-app

Then you will also need a transform and transformIgnorePatterns in your jest.config.js file

transform: {
    "^.+\\.[t|j]sx?$": "babel-jest"
  },
transformIgnorePatterns: ["node_modules/(?!swiper|ssr-window|dom7).*/"]

I'm not 100% I familiar with create-react-app, but I think this gets you where you want to be. The full jest config file looks like this:

const { defaults } = require("jest-config");

module.exports = {
  
  moduleFileExtensions: [...defaults.moduleFileExtensions, "js"],
  setupFiles: ["<rootDir>/src/__test__/setupTests.js"],
  setupFilesAfterEnv: ["<rootDir>/src/__test__/setupTestsAfterEnv.js"],
  testPathIgnorePatterns: ["<rootDir>/node_modules/"],

  moduleNameMapper: {
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
      "./__mocks__/fileMock.js",
  },
  transform: {
    "^.+\\.[t|j]sx?$": "babel-jest"
  },
  transformIgnorePatterns: ["node_modules/(?!swiper|ssr-window|dom7).*/"]
  
};

Good luck !

Thank you! It did a trick for the demo app. Let me test it in the main project — Rubycon, Apr 27 '22 at 06:47
I ended up getting it to work without the transform, but needed the transformIgnorePatterns. Using Swiper 8.2.4. — Logan Cundiff, Jun 30 '22 at 20:18

Jest: test components with ESM dependencies

1 Answers1

Linked