reactjs 在下一个js中从'./swiper.js'导入{ Swiper }问题

41ik7eoe  于 2022-12-03  发布在  React
关注(0)|答案(1)|浏览(91)

Problem image
嗨,我有这个问题,而测试的下一个js与内置的swiper,
从'./swiper.js'导入{ Swiper };
语法错误:无法在模块外部使用import语句
我使用的版本是
“下一个”:“^12.3.0”,“滑动器”:“^8.4.5”,“笑话”:“^29.0.2”,
jest.config.js

const nextJest = require('next/jest');

const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: './'
});

const customJestConfig = {
  moduleNameMapper: {
    // Handle module aliases (this will be automatically configured for you soon)
    '^@/(.*)$': '<rootDir>/src/$1',
    '^@/public/(.*)$': '<rootDir>/public/$1'
  },

  setupFilesAfterEnv: ['./jest.setup.js', './src/__mocks__/mocks.ts'],
  clearMocks: true,
  collectCoverage: true,
  collectCoverageFrom: [
    './src/**/*.{js,jsx,ts,tsx}',
    '!./src/**/_*.{js,jsx,ts,tsx}',
    '!**/*.d.ts',
    '!**/node_modules/**'
  ],

  coverageThreshold: {
    // global: {
    //   branches: 80,
    //   functions: 80,
    //   lines: 80,
    //   statements: 80,
    // },
  },
  testEnvironment: 'jest-environment-jsdom'
};

module.exports = createJestConfig(customJestConfig);

这是组件的实现

import { Box, Typography } from '@mui/material';
import React, { useState } from 'react';
import SwiperCore, { Navigation, Pagination, Virtual } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';

SwiperCore?.use([Virtual, Navigation, Pagination]);

export const GallerySlider = () => {
  const [slides] = useState(
    Array.from({ length: 500 }).map((_, index) => `Slide ${index + 1}`)
  );

  return (
    <Box width={'100%'} height={'50vh'}>
      <Typography
        variant={'h2'}
        textAlign={'center'}
        marginBottom={{ xs: '2rem', md: '4rem' }}
      >
        Galeria
      </Typography>
      <Swiper
        slidesPerView={3}
        centeredSlides={true}
        spaceBetween={30}
        pagination={{ type: 'fraction' }}
        navigation={true}
        virtual
      >
        {slides.map((slideContent, index) => (
          <SwiperSlide key={slideContent} virtualIndex={index}>
            {slideContent}
          </SwiperSlide>
        ))}
      </Swiper>
    </Box>
  );
};

如果有人能给予我解决这个错误,我将不胜感激。

deyfvvtc

deyfvvtc1#

我的解决方案是降级到swiper@6.8.0

相关问题