Question

我有一个React容器，它的查询嵌套在一个突变中。我可以通过使用MockedProvider传递Mutation和Query的模拟响应来测试初始渲染是否正常。

例如，在初始渲染中，我正在模拟查询以返回消息，例如“ TEST MESSAGE” 。

当我单击MyComponent内的按钮时，它确实调用了mutationFn()，我已经用console.log验证了这一点，但是Query并没有用新邮件为“空”

我想确保单击按钮时，子组件的props从Query或Mutation的return函数被调用。使用Jest怎么可能？

测试（简体）：

  it('should pass message to message component', async (done) 
    => {
    await new Promise((resolve) => setTimeout(resolve));
    comp.update();

    comp.find('Button').simulate('click');
    await new Promise((resolve) => setTimeout(resolve, 10));
    comp.update();
    expect(comp.find(MyComponent.props('message')).toBeNull();
    done();
  });

反应容器（简体）：

class MyContainer extends PureComponent {
  public render() {
    return (
      <Mutation mutation={MY_MUTATION}>
        {(mutationFn) => {
          return (
            <Query query={MY_QUERY}>
              {({ data, loading, error }: QueryResult<IAppUIQuery>) => {
                if (loading || error || !data || !data.appUI || !data.myQuery.message) {
                  return null;
                }
                const message = data.myQuery.message;

                return (
                  <MyComponent
                    message={message}
                    closeButtonClick={this.createCloseButtonHandler(mutationFn)}
                  />
                );
              }}
            </Query>
          );
        }}
      </Mutation>);
  }

  private createCloseButtonHandler = (mutationFn: MutationFn<null, IVars>) => {
    return () => {
      mutationFn({ variables: { message: null } });
    };
  }

是否有一种方法可以迫使Query在点击时重新呈现？还是有办法监视mutationFn()？

React Apollo测试变异中的嵌套查询

0 个答案: