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

Question

我有两个组件，一个是 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

Answer 1

前两个测试失败，因为您没有在这里使用 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

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

react children render props unit test

unit-testing

reactjs

enzyme