{"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,"node_id":"MDU6SXNzdWUyOTk0MDczNjU=","number":1711,"title":"How to use the MockedProvider","user":{"login":"andrew-w-ross","id":14924726,"node_id":"MDQ6VXNlcjE0OTI0NzI2","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":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":26,"created_at":"2018-02-22T15:56:44Z","updated_at":"2018-11-08T00:49:11Z","closed_at":"2018-08-24T07:08:45Z","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/436832549","html_url":"https://github.com/apollographql/react-apollo/issues/1711#issuecomment-436832549","issue_url":"https://api.github.com/repos/apollographql/react-apollo/issues/1711","id":436832549,"node_id":"MDEyOklzc3VlQ29tbWVudDQzNjgzMjU0OQ==","user":{"login":"Didericis","id":6478250,"node_id":"MDQ6VXNlcjY0NzgyNTA=","avatar_url":"https://avatars0.githubusercontent.com/u/6478250?v=4","gravatar_id":"","url":"https://api.github.com/users/Didericis","html_url":"https://github.com/Didericis","followers_url":"https://api.github.com/users/Didericis/followers","following_url":"https://api.github.com/users/Didericis/following{/other_user}","gists_url":"https://api.github.com/users/Didericis/gists{/gist_id}","starred_url":"https://api.github.com/users/Didericis/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Didericis/subscriptions","organizations_url":"https://api.github.com/users/Didericis/orgs","repos_url":"https://api.github.com/users/Didericis/repos","events_url":"https://api.github.com/users/Didericis/events{/privacy}","received_events_url":"https://api.github.com/users/Didericis/received_events","type":"User","site_admin":false},"created_at":"2018-11-08T00:49:11Z","updated_at":"2018-11-08T00:49:11Z","author_association":"NONE","body":"@mbrowne Yeah, that's similar to the approach I took. Using the lower level testing tools to create your own provider isn't that bad, and it's easier to work with, imo, since it's easier to see what's going on. Creating your own provider also allows you to mock out other global stuff like redux so you don't have to worry about bringing in the right mock providers for whatever your testing; you can just plop the same test provider around any smart component you want to test.\r\n\r\n[`addMockFunctionsToSchema`](https://github.com/apollographql/graphql-tools/blob/d8541efcebe5e16ff2f4b4a48c6f6f8ef9506a57/docs/source/mocking.md) is particularly nifty, imo.\r\n\r\nAssuming you have access to a plain text version of the schema wherever your client is, you can use it to mock out resolvers rather than specific queries. It's a less brittle approach, imo, since you can refactor the query a component uses without necessarily needing to change the mocks for that query (you end up testing that the query works given resolver results rather just copying the query into the mock every time you change it). You also get a heads up if the a query you're using is not longer valid with the current schema; if you're just mocking requests/responses, you risk false positives. (more details in that [guide](http://blog.dideric.is/2018/03/18/Testing-apollo-containers/) I linked above.)"}}
{"actor":{"display_login":"Didericis"}}