我正在用笑话创建一些快照测试。它给了我 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
)
}
Features.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
我的解决方案是将以下内容引入我的笑话配置文件中:
module.exports = {
// ...
transformIgnorePatterns: ['node_modules/(?!(swiper|ssr-window))']
}
根据您的设置,这可能会有所不同。就我而言,我正在扩展框架提供的配置,因此我们需要的就是上面的内容,但是请参阅此处以获取更详细的配置。
当我们将 Swiper 添加到 Vue 2 项目时,这个错误就开始出现。将其添加到
jest.config.js
修复了它。
moduleNameMapper: {
'^swiper': '<rootDir>/node_modules/swiper/swiper.min.js',
},