Jest 在 SwiperJs 中遇到了意外的令牌答案

【问题标题】：Jest encountered an unexpected token with SwiperJsJest 在 SwiperJs 中遇到了意外的令牌
【发布时间】：2023-02-04 14:26:03
【问题描述】：

我正在开玩笑地创建一些快照测试。它给我 SwiperJs 的错误。在我的测试中，我只想拥有渲染组件的快照。我还有一个功能组件，它呈现来自静态数据的功能。它的测试毫无问题地通过了。

当我运行测试时，它给了我那个错误。

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

功能.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();
  });
});

我安装了 jest 包： yarn add --dev jest babel-jest @babel/preset-env @babel/preset-react react-test-renderer

【问题讨论】：

这回答了你的问题了吗？ Jest: test components with ESM dependencies

标签： reactjs testing jestjs swiper.js

【解决方案1】：

我的解决方案是在我的 jest 配置文件中引入以下内容：

module.exports = {
  // ...
  transformIgnorePatterns: ['node_modules/(?!(swiper|ssr-window))']
}

根据您的设置，这可能会有所不同。在我的例子中，我正在扩展框架提供的配置，所以我们需要的只是上面的内容，但是 see here 以获得更详细的配置。

【讨论】：