Javascript 如何测试传递给组件的方法

我一直在努力准确地指出如何解决这个问题，我尝试过使用模拟数据和各种不同的方法，我仍然在网上寻找解决方案

我很好奇如何设置我的测试，以便它检测真实条件（CardTopic topic==“React”），然后调用适当的函数

试验

---

简单的修复。您只需要为组件提供一些

jest.fn（）

props

请阅读更多关于：块和方法的信息

例如：

import React from "react";
import { shallow } from "enzyme"
import CardTopic from '../path/to/CardTopic";

// jest mocked functions -- defined here for ease of use throughout the test
const renderReview = jest.fn(); 
const renderNotFound = jest.fn();

// define any initial props (this.props) the component uses   
const initialProps = {
  renderReview,
  renderNotFound,
  ...etc
}

describe("Card Topic", () => {

  let wrapper;
  beforeEach(() => {
    wrapper = shallow(<CardTopic {...initialProps } />); // this resets wrapper for each test (removes any state that was set)
  });

  afterEach(() => {
    renderReview.mockClear(); // resets the mock information (number of times it's been called);
    renderNotFound.mockClear(); // resets the mock information (number of times it's been called);
    wrapper.unmount(); // unmounts each wrapper instance after each test 
  });

  it("renders renderReview if the local state topic equals 'React'", () => {
    wrapper.setState({ topic: "React" }); // set wrapper's "topic" state
    wrapper.update(); // update the wrapper with this new state

    wrapper.instance().handleClick(); // invoke the method

    expect(renderReview).toHaveBeenCalledTimes(1); // expect a mock function to be called
    expect(renderNotFound).toHaveBeenCalledTimes(0); // not needed, but here for declarative purposes
  });

  it("renders renderNotFound if the local state topic does not equal 'React'", () => {
    wrapper.setState({ topic: "Redux" }); // set wrapper's "topic" state
    wrapper.update(); // update the wrapper with this new state

    wrapper.instance().handleClick(); // invoke the method

    expect(renderNotFound).toHaveBeenCalledTimes(1); // expect a mock function to be called
    expect(renderReview).toHaveBeenCalledTimes(0); // not needed, but here for declarative purposes
  });
});

从“React”导入React；
从“酶”导入{shall}
将CardTopic从“../path/to/CardTopic”导入；
//jest模拟函数——此处定义是为了在整个测试过程中易于使用
const renderReview=jest.fn（）；
const renderNotFound=jest.fn（）；
//定义组件使用的任何初始道具（this.props）
常量initialProps={
渲染视图，
renderNotFound，
等
}
描述（“卡片主题”，（）=>{
让包装纸；
在每个之前（（）=>{
wrapper=shallow（）；//这将重置每个测试的包装（删除任何已设置的状态）
});
之后（（）=>{
renderView.mockClear（）；//重置模拟信息（调用的次数）；
renderNotFound.mockClear（）；//重置模拟信息（调用它的次数）；
wrapper.unmount（）；//在每次测试后卸载每个包装器实例
});
它（“如果本地状态主题等于‘React’，（）=>{
setState（{topic:“React”}）；//设置包装器的“topic”状态
wrapper.update（）；//使用此新状态更新包装
wrapper.instance（）.handleClick（）；//调用该方法
expect（renderReview）.toHaveBeenCalledTimes（1）；//期望调用模拟函数
expect（renderNotFound）.toHaveBeenCalledTimes（0）；//不需要，但此处用于声明目的
});
它（“如果本地状态主题不等于‘React’，（）=>{
setState（{topic:“Redux”}）；//设置包装器的“topic”状态
wrapper.update（）；//使用此新状态更新包装
wrapper.instance（）.handleClick（）；//调用该方法
expect（renderNotFound）.toHaveBeenCalledTimes（1）；//期望调用模拟函数
expect（renderReview）.toHaveBeenCalledTimes（0）；//不需要，但此处用于声明目的
});
});

---

---

如果您不想使用模拟函数，而是想对实际函数进行测试，那么您需要导入这些函数，并以与上面演示的相同方式提供它们。然后，如果这些函数更改了

DOM

，那么您需要对

DOM

进行断言，您将

主题

作为一个道具o您可能想将其移动到状态。

renderView

如何传递到

CardTopic

？您也需要模拟它。您似乎正在发送一个道具

topic

，但正在检查

此.state.topic

的条件，它们是否以某种方式同步？

TypeError: this.props.renderReview is not a function

      11 |   handleClick = () => {
      12 |     this.state.topic === "React"
    > 13 |       ? this.props.renderReview()
         |                    ^
      14 |       : this.props.renderNotFound();
      15 |   };
      16 |   render() {

import React from "react";
import { shallow } from "enzyme"
import CardTopic from '../path/to/CardTopic";

// jest mocked functions -- defined here for ease of use throughout the test
const renderReview = jest.fn(); 
const renderNotFound = jest.fn();

// define any initial props (this.props) the component uses   
const initialProps = {
  renderReview,
  renderNotFound,
  ...etc
}

describe("Card Topic", () => {

  let wrapper;
  beforeEach(() => {
    wrapper = shallow(<CardTopic {...initialProps } />); // this resets wrapper for each test (removes any state that was set)
  });

  afterEach(() => {
    renderReview.mockClear(); // resets the mock information (number of times it's been called);
    renderNotFound.mockClear(); // resets the mock information (number of times it's been called);
    wrapper.unmount(); // unmounts each wrapper instance after each test 
  });

  it("renders renderReview if the local state topic equals 'React'", () => {
    wrapper.setState({ topic: "React" }); // set wrapper's "topic" state
    wrapper.update(); // update the wrapper with this new state

    wrapper.instance().handleClick(); // invoke the method

    expect(renderReview).toHaveBeenCalledTimes(1); // expect a mock function to be called
    expect(renderNotFound).toHaveBeenCalledTimes(0); // not needed, but here for declarative purposes
  });

  it("renders renderNotFound if the local state topic does not equal 'React'", () => {
    wrapper.setState({ topic: "Redux" }); // set wrapper's "topic" state
    wrapper.update(); // update the wrapper with this new state

    wrapper.instance().handleClick(); // invoke the method

    expect(renderNotFound).toHaveBeenCalledTimes(1); // expect a mock function to be called
    expect(renderReview).toHaveBeenCalledTimes(0); // not needed, but here for declarative purposes
  });
});