reactjs - Antd 打破 jest 快照测试
问题描述
我有像下面这样执行简单快照测试的代码。
import React from "react";
import { configure, shallow } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import Container from "../Container";
import renderer from "react-test-renderer";
import "jest-styled-components";
configure({ adapter: new Adapter() });
describe("Container.tsx", () => {
describe("Container", () => {
it("should pass snapshot test", () => {
const tree = renderer.create(<Container />).toJSON();
expect(tree).toMatchSnapshot();
});
});
});
这种模式在大多数情况下都非常有效,但是当我有 antd 组件时,它会因以下错误而中断
● Test suite failed to run
/next-front/node_modules/antd/lib/style/index.less:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){@import './themes/index';
^
SyntaxError: Invalid or unexpected token
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
at Object.<anonymous> (node_modules/antd/lib/col/style/index.js:3:1)
这似乎是由于antd中的文件较少。究竟是什么问题,我该如何克服它?
下面是我的 jest.tsconfig.json 文件
{
"compilerOptions": {
"module": "commonjs",
"target": "esnext",
"jsx": "react",
"sourceMap": false,
"experimentalDecorators": true,
"noImplicitUseStrict": true,
"removeComments": true,
"moduleResolution": "node",
"lib": [
"es2017",
"dom"
],
"typeRoots": [
"node_modules/@types"
]
},
"exclude": [
"node_modules",
"out",
".next"
]
}
解决方案
推荐阅读
- vue.js - RouterLink 在 Vue Js 中未正确显示
- rxjs - 用大理石图测试去抖动
- angularjs - 在 angular.js 中包含带有 $provide.factory 的工厂函数后无法调用工厂方法
- javascript - 将参数传递给 Function Express JS
- javascript - 来自嵌套函数的Vuejs访问函数
- javascript - sequilize:如何获取创建时间超过 1 小时的记录
- javascript - 承诺不会将所有数据提取到前端
- php - 将数组转换为对象的更好方法
- algorithm - 选择序列中的元素
- bash - 在后台运行 mplayer 命令将 &1 替换为 1