Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Test GraphQL Query #1326

Closed
valle-xyz opened this issue Feb 24, 2017 · 20 comments
Closed

Test GraphQL Query #1326

valle-xyz opened this issue Feb 24, 2017 · 20 comments

Comments

@valle-xyz
Copy link

Hey guys,

first of all: Thanks for the great work. I think you know, that you opened the GraphQL world for a lot of people, because Relay is so hard to use.

Ok, BUT. How can we test Apollos Queries and Mutations? To test mutations, I thought it would be a good idea to mock fetch with nock or fetch-mock, hardcode the queries response and then check if the react component acted as expected.

Well I wasn't that successful, using Karma and Enzyme. So I thought you guys come up with a solution that is just a brilliant as your library?

:-)

@jbaxleyiii
Copy link
Contributor

@Valentin-Seehausen we need a lot better documentation around testing (I'm hoping to get to it soon), but have you seen https://github.com/apollographql/react-apollo/blob/master/examples/create-react-app/src/Pokemon.test.js as a starting point?

@valle-xyz
Copy link
Author

Ah nice. Thank you, will have a look!

@valle-xyz
Copy link
Author

Also I thought, that it would be helpful, if there was a way, to bundle the mutations into functions, that you could pass to React Containers. So instead of using the graphql wrapper, we would build a selfcontained function that we could unit test. I haven't fount a way to do this. Can you also help me with that?

@jbaxleyiii
Copy link
Contributor

jbaxleyiii commented Feb 24, 2017

@Valentin-Seehausen one approach that we have been using is to export the graphql wrapper and the component it is wrapping to test both. Since graphql() uses props to pass methods / data to the wrapped component, when testing the wrapped component we can pass in mocked functions via props. For example

// file
import React, { Component, PropTypes } from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';

export class NewEntry extends Component {
  render() {
    return <div onClick={() => this.props.submit('apollostack/apollo-client')}>Click me</div>;
  }
}

export const submitRepository = gql`
  mutation submitRepository($repoFullName: String!) {
    submitRepository(repoFullName: $repoFullName) {
      createdAt
    }
  }
`;

export const withData = graphql(submitRepository, {
  props: ({ mutate }) => ({
    submit: (repoFullName) => mutate({ variables: { repoFullName } }),
  }),
});

export default withData(NewEntry);

// in test file
it("does a thing on click", () => {
    const mockedSubmit = jest.fn(() => {});
    const tree = renderer.create(
      <NewEntry submit={mockedSubmit} />
    );

   // simulate click (we use and love enzyme for this kind of stuff)

    expect(mockedSubmit ).toBeCalledWith(/* args */);
  });

@valle-xyz
Copy link
Author

Thank you very much for your answer.

And how would you test the mutation? i.e. that it makes the correct http request?

And, how would you test the components reaction to the correct http request?

@valle-xyz
Copy link
Author

Sorry to bomb with questions.

But how would you configure MockedProvider to react to a mutation?

@jbaxleyiii
Copy link
Contributor

@valle-xyz
Copy link
Author

Ah, ok, basically the same for a mutation as for a query. Thanks a lot. I will try it again tomorrow.

@calebmer
Copy link
Contributor

You could also use a mock network interface like we do in tests 😊: https://github.com/apollographql/apollo-client/blob/220ba33fe7d80b425e6d8c2ff57d175ddaedd57f/test/mocks/mockNetworkInterface.ts

@jbaxleyiii’s advice was very good, so I’m going to close. Let us know if you have any more questions 😊

@stubailo
Copy link
Contributor

If someone wrote a post about testing react-apollo components I think that would be a very popular post!

@jbaxleyiii
Copy link
Contributor

jbaxleyiii commented Feb 24, 2017 via email

@valle-xyz
Copy link
Author

Nice. I love you guys! Postponed testing to next week, but thanks for the great answers and for the draft.

@lewisblackwood
Copy link

@jbaxleyiii 👋 was there any progress on documentation around testing? I'd love to get involved, either helping to produce content or reviewing from a user perspective.

I have some questions around using MockedProvider and the example projects. It would be helpful to maintain an open thread with any questions around the testing utils. I'm not sure about the best place to ask these right now!

@utkarshsaxena93
Copy link

@Valentin-Seehausen Were you able to test mutations on your components? (and the reaction of components to the mutation?)
In my test when I use MockedProvider with the appropriate mock prop, my component shows the UI in the loading state (i.e when the returned object from GraphQL has loading: true) instead of when loading in complete and the actual response is received?

Any help will be greatly appreciated :)

c/c @jbaxleyiii @calebmer

@karlhorky
Copy link

@jbaxleyiii Any movement here on the documentation? Was working with this today and it would be great to have some docs 😄

@elmarsto
Copy link

elmarsto commented Aug 4, 2017

I went to https://github.com/apollographql/react-apollo/blob/master/examples/create-react-app/src/Pokemon.test.js and it is now a 404. Any documentation on this, or, failing that, a solid example?

I've been reading through http://dev.apollodata.com/tools/graphql-tools/mocking.html and it's not prima facie clear to me how to apply this to react-apollo.

@alehl
Copy link

alehl commented Sep 30, 2017

@liz-mars getting a 404 as well. I also agree that it's not clear how to apply this to react-apollo... hopefully there's some update soon

@paradite
Copy link

I still don't see any blog posts around, so I wrote one myself:
https://paradite.com/2017/11/16/test-react-apollo-components-enzyme-examples/

Hopefully it would help people who are new to this. Let me know if you spot any errors or inaccuracies.

@rohit-ravikoti
Copy link

@utkarshsaxena93, I'm having the same issue. Have you been able to figure it out?

@Didericis
Copy link

@paradite Referenced your blog post in a follow up geared more towards Apollo 2.0 that explains how to apply http://dev.apollodata.com/tools/graphql-tools/mocking.html more.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Feb 16, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests