反应儿童渲染道具单元测试

react children render props unit test

我有两个组件,一个是 Parent,另一个是作为 renderProp 传递的 Kid

export class Kid extends Component {
  render() {
    const { age, name } = this.props;
    return (
      <div className="kid">
        <span className="age">age: {age}</span>, name: {name}
      </div>
    );
  }
}

export class Parent extends Component {
  state = {
    age: 20,
    name: "the name"
  };
  render() {
    return (
      <div>
        {this.props.children({ age: this.state.age, name: this.state.name })}
      </div>
    );
  }
}

export default function App() {
  return (
    <div className="parent">
      <Parent>{({ age, name }) => <Kid age={age} name={name} />}</Parent>
    </div>
  );
}

如何确保 Kid 具有正确的单元测试道具

describe("<App />", () => {
  it("Should render Kid", () => {
    const wrapper = shallow(<App />);
    console.log(wrapper.debug());

    // pass
    expect(wrapper.find(Parent).exists()).toBe(true);

    // fails
    expect(wrapper.find(Kid).exists()).toBe(true);
    expect(wrapper.find(Parent).children().find(Kid).exists()).toBe(true);

    // fails
    const kid1 = wrapper
      .find(Parent)
      .renderProp("children", { age: 5, name: "a" });
    expect(kid1.prop("age")).toEqual(5);
    expect(kid1.hasClass("kid")).toBe(true);

    // fails
    const kid2 = wrapper.find(Parent).prop("children")({ age: 5, name: "a" });
    expect(kid2.prop("age")).toEqual(5);
  });
});


这是沙箱示例 https://codesandbox.io/s/jest-test-children-function-hcvzz?file=/src/App.test.js:0-884

前两个测试失败,因为您没有在这里使用 renderProp。后两个测试失败,因为 renderProp (docs) 接受了一个 prop 名称,而 returns 一个接受 render-prop 参数的函数,所以你需要在一个单独的对象中传递对象函数应用:

const kid1 = wrapper.find(Parent).renderProp("children")({ age: 5, name: "a" });

kid1.hasClass("kid") 上的测试仍然会失败,因为 Kid 本身并未实际呈现,因为您使用的是 shallow。如果将 .prop("children") 替换为 renderProp("children")kid2 上的测试将通过,但它与 kid1.

相同

CodeSandbox