测试Apollo变异graphql错误

Question

根据文档，我应该能够模拟graphql错误以进行测试。

To simulate GraphQL errors, simply define errors along with any data in your result.

const dogMock = {
  // ...
  result: {
    errors: [{ message: "Error!" }],
  },
};

但是，该错误导致我的测试完全失败。对于查询，它可以按预期工作，但是文档说，它对Mutation也一样。

为了简单起见，这里没有显示突变的错误情况，但是测试Mutation错误与测试Query错误完全相同：只需将错误添加到模拟中，触发突变，并检查UI以获得错误消息。

这是我的代码...

零件

class Example extends Component {
  state = {email: ''};

  render() {
    return (
      <div>
        <Mutation mutation={EXAMPLE_MUTATION} variables={this.state}>
          {(signin, {error, loading}) => {
            if(error)
              return <p data-test="graphql-error">{error.message}</p>;

            return (
              <form method="post" onSubmit={async e => {
                e.preventDefault();
                await signin();
                this.setState({email: ''});
              }}>
                <fieldset disabled={loading} aria-busy={loading}>
                  <label htmlFor="email">
                    Email
                    <input type="email" name="email" placeholder="email" value={this.state.email} onChange={this.saveToState} />
                  </label>
                  <div>
                    <input type="submit" value="Example"/>
                  </div>
                </fieldset>
              </form>
            )
          }}
        </Mutation>
      </div>
    );
  }

  saveToState = e => this.setState({[e.target.name]: e.target.value});
}

突变

const EXAMPLE_MUTATION = gql`
  mutation EXAMPLE_MUTATION($email: String!){
    example(email: $email){
      email
      name
    }
  }
`;

测试

describe('<Example />', () => {
  it('handles errors properly', async () => {
    const wrapper = mount(
      <MockedProvider mocks={[{
        request: {query: EXAMPLE_MUTATION, variables: {email: 'test@email.com'}},
        result: {errors: [{message: "There was an error"}]}}]}>
        <Example />
      </MockedProvider>
    );

    type(wrapper, 'email', 'test@email.com');
    wrapper.update();
    wrapper.find(`form`).simulate('submit');

    // form is busy + contains inputs
    expect(toJSON(wrapper.find('form'))).toMatchSnapshot();

    await wait();
    wrapper.update();

    // test fails before ever getting here

    const err = wrapper.find('[data-test="graphql-error"]');
    expect(err.text()).toEqual('There was an error');

    console.log(err.debug())
    console.log(err.text())
  });

测试失败并显示我的错误，而不是像我期望的那样将其呈现到页面。

    GraphQL error: There was an error

      at new ApolloError (node_modules/src/errors/ApolloError.ts:56:5)
      at Object.next (node_modules/src/core/QueryManager.ts:258:21)
      at notifySubscription (node_modules/zen-observable/lib/Observable.js:130:18)
      at onNotify (node_modules/zen-observable/lib/Observable.js:165:3)
      at SubscriptionObserver.next (node_modules/zen-observable/lib/Observable.js:219:7)
      at node_modules/react-apollo/test-utils.js:937:38
      at Timeout.callback (node_modules/jsdom/lib/jsdom/browser/Window.js:678:19)

我哪里做错了？任何帮助将非常感激！

Answer 1

当变异失败时，如果没有向组件提供 prop （此处为源代码react-apollo），则会抛出错误。如果您没有捕获错误，测试运行程序会将其解释为失败的测试。onErrorMutation

这可以通过提供虚拟 prop 来防止抛出错误来解决onError：

<Mutation mutation={EXAMPLE_MUTATION} variables={this.state} onError={() => {}}>

或者通过将突变调用包装在try...catch(await很重要，因为错误是异步的)：

try {
  await signin();
} catch (error) {
  // do smth with the error here
}

有一个相关的GitHub 问题。