Javascript 如何使用jest测试react组件中的arrow函数调用？

im新手使用react进行玩笑/酶测试，我试图通过传递道具来测试react按钮组件，我收到此错误无法读取未定义的属性“onIncrement”

describe("Name of the group", () => {
  const counter = 'pc';
  const onIncrement = jest.fn();
  const props = {
    onIncrement,
    counter
};
it("should be clicked ", () => {
  const button = shallow(<Button {...{props}}>Increment</Button>);
  button.find(".increment").simulate("click");
  expect(button).toHaveBeenCalledWith('pc');
  });
  });

description（“组名”），（）=>{
常数计数器='pc'；
const onIncrement=jest.fn（）；
常量道具={
增加,，
柜台
};
它（“应该被点击”，（）=>{
常数按钮=浅（增量）；
按钮。查找（“.increment”）。模拟（“单击”）；
期望（按钮）。与（“pc”）一起调用；
});
});

---

从“React”导入React；
导出常量按钮=（道具）=>{
返回(
props.onIncrement（props.counter）}
>
增量
);
};

您需要更改以下内容：

export const Button = ({ props }) => {} // component has a property called props

为此：

export const Button = (props) => {}

否则：

// it is not recommended
const button = shallow(<Button {...{props}}>Increment</Button>);

//不建议这样做
常数按钮=浅（增量）；

编辑：

这应该是有效的：

export const Button = (props) => {
  return (
    <button
     id="inc"
     className="increment"
     onClick={() => props.onIncrement(props.counter)}
    >
     Increment
    </button>
  );
 };
describe("Name of the group", () => {
  const counter = "pc";
  const props = {
    onIncrement: jest.fn(),
    counter,
  };

  it("should ", () => {
    const button = shallow(<Button {...props}>Increment</Button>);
    button.find(".increment").simulate("click");
    expect(props.onIncrement).toHaveBeenCalledWith("pc");
  });
});

export const按钮=（道具）=>{
返回(
props.onIncrement（props.counter）}
>
增量
);
};
描述（“组名”，（）=>{
const counter=“pc”；
常量道具={
onIncrement:jest.fn（），
柜台
};
它（“应该”，（）=>{
常数按钮=浅（增量）；
按钮。查找（“.increment”）。模拟（“单击”）；
期望（增加的道具）。与（“pc”）；
});
});

测试组件中有错误，

（{props}）

。这是

（道具）

。另外，

jest.fn（（e）=>（onIncrement=e））

没有意义，为什么要重新分配间谍函数，更不用说它是一个常量了？现在检查我现在重新分配了它，并用值传递对象。并尝试在单击时返回id值。常量计数器={id:1，值：0}；const onIncrement=jest.fn（）；const props={onIncrement，counter}；它（“应该被点击”，（）=>{const button=shall（Increment）；button.find（.Increment”）.simulate（“点击”）；expect（button）。toHaveBeenCalledWith（counter.id==1）；}）<代码>是另一个错误。它将使用道具键传递道具对象。它应该像以前一样

。答案提到它是因为

是一种可以使

（{props}）

工作的方法，但它不应该是那样的。是的，谢谢，伙计，我找到了解决方案。这对我不起作用。现在没有读取onIncrement属性。您是否收到相同的错误？props.onIncrement不是函数。这就是我得到的。我更新了我的答案。谢谢，伙计，它成功了。

export const Button = (props) => {
  return (
    <button
     id="inc"
     className="increment"
     onClick={() => props.onIncrement(props.counter)}
    >
     Increment
    </button>
  );
 };
describe("Name of the group", () => {
  const counter = "pc";
  const props = {
    onIncrement: jest.fn(),
    counter,
  };

  it("should ", () => {
    const button = shallow(<Button {...props}>Increment</Button>);
    button.find(".increment").simulate("click");
    expect(props.onIncrement).toHaveBeenCalledWith("pc");
  });
});