{"action":"created","issue":{"url":"https://api.github.com/repos/apollographql/react-apollo/issues/1711","repository_url":"https://api.github.com/repos/apollographql/react-apollo","labels_url":"https://api.github.com/repos/apollographql/react-apollo/issues/1711/labels{/name}","comments_url":"https://api.github.com/repos/apollographql/react-apollo/issues/1711/comments","events_url":"https://api.github.com/repos/apollographql/react-apollo/issues/1711/events","html_url":"https://github.com/apollographql/react-apollo/issues/1711","id":299407365,"number":1711,"title":"How to use the MockedProvider","user":{"login":"andrew-w-ross","id":14924726,"avatar_url":"https://avatars2.githubusercontent.com/u/14924726?v=4","gravatar_id":"","url":"https://api.github.com/users/andrew-w-ross","html_url":"https://github.com/andrew-w-ross","followers_url":"https://api.github.com/users/andrew-w-ross/followers","following_url":"https://api.github.com/users/andrew-w-ross/following{/other_user}","gists_url":"https://api.github.com/users/andrew-w-ross/gists{/gist_id}","starred_url":"https://api.github.com/users/andrew-w-ross/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/andrew-w-ross/subscriptions","organizations_url":"https://api.github.com/users/andrew-w-ross/orgs","repos_url":"https://api.github.com/users/andrew-w-ross/repos","events_url":"https://api.github.com/users/andrew-w-ross/events{/privacy}","received_events_url":"https://api.github.com/users/andrew-w-ross/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-02-22T15:56:44Z","updated_at":"2018-02-28T23:08:31Z","closed_at":null,"author_association":"NONE","body":"**Intended outcome:**\r\n\r\nTest a graphql component with `MockedProvider`\r\n\r\n**Actual outcome:**\r\n\r\nThe first test with Loading works. The second where the result should be `<h1>hello world<h1>` does not.\r\n\r\n**How to reproduce the issue:**\r\n\r\nUsual `create-react-app` with the following test in jest\r\n\r\n```javascript\r\nimport React from 'react'\r\nimport { mount } from 'enzyme'\r\nimport { MockedProvider } from 'react-apollo/test-utils'\r\nimport gql from 'graphql-tag'\r\nimport { graphql } from 'react-apollo'\r\n\r\nconst query = gql`\r\n  query hello{\r\n    hello\r\n  }\r\n`\r\n\r\nconst TestComp = props => {\r\n  const { loading, hello } = props.data\r\n  if (loading) {\r\n    return <h1>Loading</h1>\r\n  }\r\n\r\n  return <h1>Hello {hello}</h1>\r\n}\r\n\r\nconst TestCompHoc = graphql(query)(TestComp)\r\n\r\nit('will render loading', () => {\r\n  const mocks = [{ request: { query } }]\r\n  const wrapper = mount(\r\n    <MockedProvider mocks={mocks}>\r\n      <TestCompHoc />\r\n    </MockedProvider>\r\n  )\r\n  expect(wrapper).toContainReact(<h1>Loading</h1>)\r\n})\r\n\r\nit('will render data', () => {\r\n  const mocks = [\r\n    {\r\n      request: { query },\r\n      result: { data: { hello: 'world' } }\r\n    }\r\n  ]\r\n  const wrapper = mount(\r\n    <MockedProvider mocks={mocks}>\r\n      <TestCompHoc />\r\n    </MockedProvider>\r\n  )\r\n  expect(wrapper).toContainReact(<h1>hello world</h1>)\r\n})\r\n```\r\n\r\nThe bigger issue is there is no documentation on how to test graphql components. \r\n\r\n**Version**\r\n\r\n* apollo-client@2.2.5\r\n* react-apollo@2.0.4\r\n"},"comment":{"url":"https://api.github.com/repos/apollographql/react-apollo/issues/comments/369415804","html_url":"https://github.com/apollographql/react-apollo/issues/1711#issuecomment-369415804","issue_url":"https://api.github.com/repos/apollographql/react-apollo/issues/1711","id":369415804,"user":{"login":"edslocomb","id":627297,"avatar_url":"https://avatars2.githubusercontent.com/u/627297?v=4","gravatar_id":"","url":"https://api.github.com/users/edslocomb","html_url":"https://github.com/edslocomb","followers_url":"https://api.github.com/users/edslocomb/followers","following_url":"https://api.github.com/users/edslocomb/following{/other_user}","gists_url":"https://api.github.com/users/edslocomb/gists{/gist_id}","starred_url":"https://api.github.com/users/edslocomb/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/edslocomb/subscriptions","organizations_url":"https://api.github.com/users/edslocomb/orgs","repos_url":"https://api.github.com/users/edslocomb/repos","events_url":"https://api.github.com/users/edslocomb/events{/privacy}","received_events_url":"https://api.github.com/users/edslocomb/received_events","type":"User","site_admin":false},"created_at":"2018-02-28T23:08:31Z","updated_at":"2018-02-28T23:08:31Z","author_association":"NONE","body":"There's some discussion of this over at [enzyme issue #728](https://github.com/airbnb/enzyme/issues/728) as well.  It seems the issue is that MockedProvider's mocked queries are still async, and the Promises returned aren't accessible (are they?) to the test framework.\r\n\r\nI haven't tried this, but perhaps you could put your expectations inside a handler for the Promise returned by a call to MockedProvider's .props.client.resetStore() ?\r\n\r\nA bit convoluted (and you'd do your query twice), but it might be an improvement over messing with timeouts or trying to find something an enzyme selector can grab onto to assure the data has all been delivered to the component..."}}
{"actor":{"display_login":"edslocomb"}}