Anyone using the new react-apollo 2.1 `Query`/`Mut...
# prisma-whats-new
d
Anyone using the new react-apollo 2.1 `Query`/`Mutation` components and have some publicly accessible examples of how they are testing components that use the new components?
f
As any component with a provider/consumer (as redux or react-router) just export the inside component to test this one alone (eg: not connected) 😉
d
The pain point with that is the Query/Mutation components aren’t necessarily “wrapping” a presentational component now…they are included within the presentational component.
f
Sure, after you can also use the HOC notation 😉
I personally the HOC if I want to test my component
But for me, you unit test an unconnected component, or you do some E2E tests
Testing a connected component don't really make sense
You can of course setup a stub of apollo provider, with some resolvers… but it's a lot of work without any huge value
(you should test your implementation, not the apollo one)
d
I prefer to avoid HOC, they aren’t explicit enough to newcomers, but that is a different topic 😉
I’m not trying to test a connected component, but am trying to test some logic in that component with mock data I want to send in. However this component has a Query component within itself.
Copy code
<Container>
    <Envy>
      <Icon id="envy-logo" title="Envy Labs" />
    </Envy>
    <Center>
      <Illustration src={vecMagicLink} title="Magic link" />
      <Query query={GET_SIGN_IN_EMAIL}>
        {({ data: { signInEmail } }) => {
          if (!signInEmail)
            return (
              <React.Fragment>
                <Text.H1>Uh oh!</Text.H1>
                <p>
                  Looks like you got to this page and there was a problem.<br />
                  {"Don't"} worry, our brightest people are on it though.<br />
                  If you are trying to login, visit <Link to="/sign-in">this page</Link> and try
                  again.
                </p>
              </React.Fragment>
            );
          return (
            <React.Fragment>
              <Text.H1>Magic Link Sent!</Text.H1>
              <p>
                We just sent an email to you at <strong>{signInEmail}</strong>.<br />It contains a
                magic link that'll sign you in super quick!
              </p>
            </React.Fragment>
          );
        }}
      </Query>
    </Center>
    <BackgroundRing />
    <BackgroundRing />
  </Container>
I’m less worried about testing that the query happened, and more interested in testing that if signInEmail is true/false, the correct path is followed
f
So for me, the "best" way to test this properly (and I precise for me ^^) it's to extract the component inside your query and test it alone. So
Copy code
export const MyCompToTest = ({isSignIn}) => {/* your implementation */}

export default () => <Container>
<Query>
{({ data: { signInEmail } }) => <MyCompToTest signInEmail={signInEmail} />}
</Query>
</Container>
No more complexity for testing, it's a simple presentational component, and you have your
Query
wrapper 😉
And of course, you can extract this little
MyCompToTest
in a proper folder with unit tests and stories aside 🙂
After, if you really want to test the connected version of your component -> https://github.com/apollographql/apollo-link/tree/master/packages/apollo-link-schema
(but remember, it's a lot of work 😉 )
d
True
Thanks for some feedback @fabien0102 🙂
f
😉 Your welcome