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 名称并返回一个接受 render-prop 参数的函数，因此您需要在单独的函数应用程序中传递该对象：< /p>

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

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

CodeSandbox

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

1 个答案: