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>
);
};
如果有人能给予我解决这个错误,我将不胜感激。
1条答案
按热度按时间deyfvvtc1#
我的解决方案是降级到swiper@6.8.0