我正在尝试创建一个下拉选项卡,但是我还没有接近添加任何功能,因为我正在尝试执行这种TDD样式,而且我什至无法测试组件内部的功能在按钮的点击事件上触发。开玩笑的日志告诉我,我尝试引用的对象不是函数。
我试图创建一个正在测试的组件的实例,并使用“ toBeCalled”函数作为匹配器,将其作为“期望”函数的参数提供,但这没有用。
组件本身:
import React from "react";
import headerImg from "./headerImg.png";
function PullDown() {
const displayUPC = () => {};
return <button onClick={displayUPC} />;
}
export default PullDown;
该组件的测试:
import React from "react";
import ReactDOM from "react-dom";
import { shallow, mount, configure, instance } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import PullDown from "./PullDown";
import enzyme from "enzyme";
configure({ adapter: new Adapter() });
describe("Pulldown tab", () => {
let wrapperPulldown;
beforeEach(() => {
wrapperPulldown = shallow(<PullDown />);
});
it("should render", () => {
expect(wrapperPulldown.find("button")).toHaveLength(1);
});
it("should be clickable", () => {
wrapperPulldown.find("button").simulate("click");
expect(wrapperPulldown.displayUPC()).toBeCalled();
});
});
我希望测试会失败,但是确实会失败,但是当我将功能添加到组件中并在按钮上附加功能后添加onClick时,测试仍然失败。这让我觉得自己还没有不能正确完成测试。
答案 0 :(得分:0)
如上所述,原因是ReactWrapper
上不存在该函数,因为它只是渲染输出周围的一个实例。另外,您不能像在基于常规类的组件中那样检查函数调用,因为它不是类的属性,例如Pulldown.displayUPC
。
但是,有两种不同的方法可以测试相似的功能:
如果可能,使组件没有隐藏的依赖关系,并通过prop传递函数引用。但是,如果您所有的组件都正常工作,那么这并不总是可能的。
// PullDown.js
function PullDown({displayUPC}) {
return <button onClick={displayUPC} />;
}
export default PullDown;
// PullDown.spec.js
describe("Pulldown tab", () => {
let wrapperPulldown;
let displayUPC;
beforeEach(() => {
displayUPC = jest.fn();
});
// ... some tests
it("should be clickable", () => {
wrapperPulldown = shallow(<PullDown displayUPC={displayUPC} />);
wrapperPulldown.find("button").simulate("click");
expect(displayUPC).toBeCalled();
});
});
如果没有足够的能力通过props传递函数引用,则另一种实现方法是在组件外部定义函数。
// PullDown.js
export const displayUPC = () => {};
function PullDown() {
return <button onClick={displayUPC} />;
}
export default PullDown;
// PullDown.spec.js
import * as pullDownModule from './PullDown.js';
describe("Pulldown tab", () => {
let wrapperPulldown;
beforeEach(() => {
jest.spyOn(pullDownModule, 'displayUPC');
wrapperPulldown = shallow(<PullDown />);
});
// ... some tests
it("should be clickable", () => {
wrapperPulldown.find("button").simulate("click");
expect(pullDownModule.displayUPC).toBeCalled();
});
});