Тестирование ошибок Apollo Mutation graphql - PullRequest
Новая
       11

Тестирование ошибок Apollo Mutation graphql

0 голосов
/ 17 января 2019

Согласно документам , я должен быть в состоянии смоделировать ошибки graphql для тестирования. 

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

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

Однако ошибка приводит к тому, что мой тест сразу не проходит. Он работает, как и ожидалось, для Query, но docs говорят, что он работает так же и для мутации.

Ради простоты случай ошибки для мутаций здесь не показан, но тестирование ошибок мутации точно такое же, как тестирование ошибок запроса: просто добавьте ошибку в макет, запустите мутацию и проверьте интерфейс для сообщений об ошибках.

Вот мой код ...

Компонент 

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
    }
  }
`;

Test 


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)

Где я ошибся? Любая помощь будет высоко ценится!

1 Ответ

0 голосов
/ 19 февраля 2019

При сбое мутации react-apollo выдает ошибку, если Mutation компоненту *1003* не предоставлен onError исходный код ). Если вы оставите ошибку необработанной, тестовый исполнитель интерпретирует ее как неудачный тест.

Эту проблему можно обойти, либо предотвращая выдачу ошибки, предоставив пустышку onError prop: 

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

или путем переноса вызова мутации в try...catch (await важен, поскольку ошибка является асинхронной): 

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

Есть актуальная проблема с GitHub .

...