我正在尝试使用React组件进行简单的单元测试,但我不断得到:
C:\work\portfolio\node_modules\gsap\TweenMax.js:13
import TweenLite, { TweenPlugin, Ease, Power0, Power1, Power2, Power3, Power4, Linear } from "./TweenLite.js";
^^^^^^^^^
导入“ App”组件的子组件的第三方库中的一个时出错。
import React from "react";
import { shallow } from 'enzyme';
import App from "./App";
fit("renders without crashing", () => {
const wrapper = shallow(<App />);
});
app.js
import React from "react";
import "./App.css";
import ChronologyGraph from "./chronology/ChronologyGraph";
import { nodeTypes, milestones } from "../staticData";
const App = () => (
<ChronologyGraph
width="700"
height="800"
nodeSize={10}
milestones={milestones.reverse()}
columns={nodeTypes}
/>
);
export default App;
package.json:
{
"name": "portfolio",
"version": "0.1.0",
"private": true,
"dependencies": {
"font-awesome": "^4.7.0",
"gsap": "^2.0.1",
"moment": "^2.22.2",
"prop-types": "^15.6.2",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-fontawesome": "^1.6.1",
"react-scripts": "^1.1.5",
"react-transition-group": "^2.4.0",
"typeface-lato": "0.0.54",
"typeface-roboto": "0.0.54",
"uuid": "^3.3.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"lint": "eslint src",
"test": "react-scripts test --env=jsdom",
"testCov": "react-scripts test --env=jsdom --coverage",
"eject": "react-scripts eject"
},
"devDependencies": {
"enzyme": "^3.4.4",
"enzyme-adapter-react-16": "^1.2.0",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^17.0.0",
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.9.1",
"prettier-eslint": "^8.8.2"
}
}
我在网上找不到任何类似的例子,我是否应该以某种方式模拟孩子的进口?我认为“浅”渲染将不会导入儿童,因此不会导入儿童
答案 0 :(得分:0)
(此处为酶维持剂)
第三方模块应在预发布时进行编译-因为在node_modules上运行babel是不安全的,并且node不支持import
。您基本上有以下选择:
gsap
上发布问题,以便他们正确地转译为预发布gsap
与其他东西答案 1 :(得分:0)
在@ljharb第三个选项之后:
如果您阅读Jest documentation,则可以简单地模拟GSAP在__mocks__
目录中创建文件。
假设您要导入TweenMax,并且要使用to
方法:
import { TweenMax } from "gsap/TweenMax";
在 mocks 目录中添加两个文件。 TweenLite可以为空。
.
└── __mocks__
└── gsap
└── TweenLite.js
└── TweenMax.js
module.exports = {
TweenMax: class{
static to(selector, time, options) {
return jest.fn();
}
}
}
您已经成功模拟了TweenMax.to
方法。
由于时间轴可用于类的实例,因此应通过以下方式进行模拟:
import { TimelineMax } from "gsap/TimelineMax";
同样,将两个文件添加到 mocks 目录中。 TweenLite可以为空。
.
└── __mocks__
└── gsap
└── TweenLite.js
└── TimelineMax.js
module.exports = {
TimelineMax: class {
constructor(){
this.to = jest.fn().mockReturnThis();
}
}
};
使用mockReturnThis()
可以链接方法。