javascript - Jest : test components with ESM dependencies

Question

我有以下组件:

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>
  );
}

然后我有以下测试文件:

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);
  });
});

和以下配置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",
  },
};

问题是:当我运行 yarn test - 它产生以下错误:

~/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';
        | ^

有人可以帮助我了解如何修复它吗？这是一个演示示例项目 https://github.com/DaveLomber/jest-esm-issue

Answer 1

显然，这与您正在使用的 swiper 库的解决方法有关。引用:https://swiperjs.com/react#usage-with-create-react-app

在 slider.jsx 中，使用直接导入方式导入 swiper

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

然后你还需要在你的 jest.config.js 文件中添加一个 transform 和 transformIgnorePatterns

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

我不是 100% 熟悉 create-react-app，但我认为这会让你到达你想去的地方。完整的 jest 配置文件如下所示:

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).*/"]
  
};

祝你好运👋!