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
Valentin-Seehausen opened this issue Feb 24, 2017 · 20 comments
Closed

Test GraphQL Query #1326

Valentin-Seehausen opened this issue Feb 24, 2017 · 20 comments

Comments

@Valentin-Seehausen
Copy link

@Valentin-Seehausen Valentin-Seehausen commented Feb 24, 2017

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
Member

@jbaxleyiii jbaxleyiii commented Feb 24, 2017

@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?

@Valentin-Seehausen
Copy link
Author

@Valentin-Seehausen Valentin-Seehausen commented Feb 24, 2017

Ah nice. Thank you, will have a look!

@Valentin-Seehausen
Copy link
Author

@Valentin-Seehausen Valentin-Seehausen commented Feb 24, 2017

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
Member

@jbaxleyiii 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 */);
  });
@Valentin-Seehausen
Copy link
Author

@Valentin-Seehausen Valentin-Seehausen commented Feb 24, 2017

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?

@Valentin-Seehausen
Copy link
Author

@Valentin-Seehausen Valentin-Seehausen commented Feb 24, 2017

Sorry to bomb with questions.

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

@Valentin-Seehausen
Copy link
Author

@Valentin-Seehausen Valentin-Seehausen commented Feb 24, 2017

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

@calebmer calebmer commented Feb 24, 2017

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 😊

@calebmer calebmer closed this Feb 24, 2017
@stubailo
Copy link
Contributor

@stubailo stubailo commented Feb 24, 2017

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

@jbaxleyiii
Copy link
Member

@jbaxleyiii jbaxleyiii commented Feb 24, 2017

@Valentin-Seehausen
Copy link
Author

@Valentin-Seehausen Valentin-Seehausen commented Feb 26, 2017

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

@lewisblackwood
Copy link

@lewisblackwood lewisblackwood commented Mar 13, 2017

@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

@utkarshsaxena93 utkarshsaxena93 commented Apr 30, 2017

@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

@karlhorky karlhorky commented May 31, 2017

@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 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 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

@paradite paradite commented Nov 16, 2017

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

@rohit-ravikoti rohit-ravikoti commented Dec 12, 2017

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

@Didericis
Copy link

@Didericis Didericis commented Mar 18, 2018

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.