Anyone using the new react-apollo 2.1 `Query`/`Mut...
# prisma-whats-newd
devan
04/02/2018, 3:37 PMAnyone 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
fabien0102
04/02/2018, 4:05 PMAs 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
devan
04/02/2018, 4:06 PMThe 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
fabien0102
04/02/2018, 4:07 PMSure, after you can also use the HOC notation š
fabien0102
04/02/2018, 4:07 PMI personally the HOC if I want to test my component
fabien0102
04/02/2018, 4:10 PMBut for me, you unit test an unconnected component, or you do some E2E tests
fabien0102
04/02/2018, 4:10 PMTesting a connected component don't really make sense
fabien0102
04/02/2018, 4:11 PMYou can of course setup a stub of apollo provider, with some resolversā¦ but it's a lot of work without any huge value
fabien0102
04/02/2018, 4:11 PM(you should test your implementation, not the apollo one)
d
devan
04/02/2018, 4:12 PMI prefer to avoid HOC, they arenāt explicit enough to newcomers, but that is a different topic š
devan
04/02/2018, 4:14 PMIā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.
devan
04/02/2018, 4:15 PM 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>devan
04/02/2018, 4:16 PMIā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
fabien0102
04/02/2018, 4:23 PMSo 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>fabien0102
04/02/2018, 4:24 PMNo more complexity for testing, it's a simple presentational component, and you have your
Queryfabien0102
04/02/2018, 4:30 PMAnd of course, you can extract this little
MyCompToTestfabien0102
04/02/2018, 4:35 PMAfter, if you really want to test the connected version of your component -> https://github.com/apollographql/apollo-link/tree/master/packages/apollo-link-schema
fabien0102
04/02/2018, 4:36 PM(but remember, it's a lot of work š )
d
devan
04/02/2018, 4:40 PMTrue
devan
04/02/2018, 4:40 PMThanks for some feedback @fabien0102 š
f
fabien0102
04/02/2018, 4:41 PMš Your welcome
2 Views