Javascript 如何使用Jest/酶测试功能反应组件中的lambda功能？

我正在尝试创建一个下拉选项卡，但是我还没有接近添加任何功能，因为我正在尝试这种TDD样式，我甚至无法测试组件内部的功能是否在按钮的单击事件中触发。jest日志告诉我，我试图引用的对象不是函数

我试图创建我正在测试的组件的一个实例，并将其作为“expect”函数的参数，使用“toBeCalled”函数作为匹配器，但这不起作用

组件本身：

import React from "react";
import headerImg from "./headerImg.png";

function PullDown() {
  const displayUPC = () => {};

  return <button onClick={displayUPC} />;
}
export default PullDown;

从“React”导入React；
从“/headerImg.png”导入headerImg；
函数下拉列表（）{
constdisplayupc=（）=>{}；
返回；
}
导出默认下拉列表；

组件的测试：

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();
  });
});

从“React”导入React；
从“react dom”导入react dom；
从“酶”导入{shall，mount，configure，instance}；
从“酶-适配器-反应-16”导入适配器；
从“/PullDown”导入下拉列表；
从“酶”进口酶；
配置（{adapter:newadapter（）}）；
描述（“下拉选项卡”，（）=>{
让包装器下拉；
在每个之前（（）=>{
wrapperPulldown=浅（）；
});
它（“应该呈现”，（）=>{
expect（wrapperPulldown.find（“按钮”）.toHaveLength（1）；
});
它（“应该是可点击的”，（）=>{
wrapperPulldown.find（“按钮”）.simulate（“单击”）；
expect（wrapperPulldown.displayUPC（））.toBeCalled（）；
});
});

---

我预计测试会失败，它确实会失败，但是当我去将功能添加到组件中，并将onClick功能添加到按钮上时，测试仍然失败。这让我感觉我没有正确地完成测试。

如上所述，原因是，

ReactWrapper

上不存在该函数，因为它只是渲染输出的一个实例。此外，您也不能像在常规的基于类的组件中那样检查函数调用，因为它不是类的属性，例如

Pulldown.displayUPC

但是，有两种不同的方法可以测试类似的功能：

如果可能，使组件没有隐藏的依赖项，并通过道具传递函数引用。但是，如果您的所有组件都能正常工作，这并不总是可能的

// 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();
  });
});

//PullDown.js
函数下拉列表（{displayUPC}）{
返回；
}
导出默认下拉列表；
//PullDown.spec.js
描述（“下拉选项卡”，（）=>{
让包装器下拉；
让我们看看UPC；
在每个之前（（）=>{
displayUPC=jest.fn（）；
});
//…一些测试
它（“应该是可点击的”，（）=>{
wrapperPulldown=浅（）；
wrapperPulldown.find（“按钮”）.simulate（“单击”）；
expect（displayUPC）.toBeCalled（）；
});
});

如果您没有通过道具传递函数引用的特权，那么实现这一点的另一种方法是在组件外部定义函数

// 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();
  });
});

//PullDown.js
export const displayUPC=（）=>{}；
函数下拉列表（）{
返回；
}
导出默认下拉列表；
//PullDown.spec.js
从“./PullDown.js”导入*作为下拉模块；
描述（“下拉选项卡”，（）=>{
让包装器下拉；
在每个之前（（）=>{
jest.spyOn（下拉模块，'displayUPC'）；
wrapperPulldown=浅（）；
});
//…一些测试
它（“应该是可点击的”，（）=>{
wrapperPulldown.find（“按钮”）.simulate（“单击”）；
expect（pullDownModule.displayUPC）.toBeCalled（）；
});
});

displayUpc

不是浅层包装的属性（这里也不需要浅层渲染）。就这点而言，它不是

下拉列表的属性；它是函数中的局部变量。您的组件是无意义的，因此您无法为其编写真正合理的测试。请注意，您预期的测试失败可能不是
函数。这就是为什么“调用快照”（预测测试结果）并将实际结果与您预期的结果进行比较很重要的原因。您可能希望看到“预期已被调用，但未被调用”，而不是“wrapperPulldown.displayUPC不是函数”，尽管displayUPC不是模拟的事实使得这种情况不太可能发生。您是对的！我对所有这些都很陌生，如果不是为了测试组件的功能，我不确定我是否理解浅层渲染的意义？你能告诉我如何正确测试组件中按钮的功能吗？你不能测试它的功能，因为它没有任何功能。一旦它更新了DOM或者与合作者进行了交互，你就可以进行测试，但目前它什么都做不了。那么你想实现什么功能呢？你还没有提到那件事。回调将做什么？您不想测试回调是否被调用，因为这是一个内部实现细节（不能，因为它在函数外部是不可访问的），那么行为是什么呢？