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

Comments

Projects
None yet
@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

This comment has been minimized.

Show comment
Hide comment
@jbaxleyiii

jbaxleyiii Feb 24, 2017

Member

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

Member

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

This comment has been minimized.

Show comment
Hide comment
@Valentin-Seehausen

Valentin-Seehausen Feb 24, 2017

Ah nice. Thank you, will have a look!

Valentin-Seehausen commented Feb 24, 2017

Ah nice. Thank you, will have a look!

@Valentin-Seehausen

This comment has been minimized.

Show comment
Hide comment
@Valentin-Seehausen

Valentin-Seehausen 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?

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

This comment has been minimized.

Show comment
Hide comment
@jbaxleyiii

jbaxleyiii Feb 24, 2017

Member

@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 */);
  });
Member

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

This comment has been minimized.

Show comment
Hide comment
@Valentin-Seehausen

Valentin-Seehausen 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 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

This comment has been minimized.

Show comment
Hide comment
@Valentin-Seehausen

Valentin-Seehausen Feb 24, 2017

Sorry to bomb with questions.

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

Valentin-Seehausen commented Feb 24, 2017

Sorry to bomb with questions.

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

@Valentin-Seehausen

This comment has been minimized.

Show comment
Hide comment
@Valentin-Seehausen

Valentin-Seehausen Feb 24, 2017

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

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

This comment has been minimized.

Show comment
Hide comment
@calebmer

calebmer Feb 24, 2017

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 😊

Contributor

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

This comment has been minimized.

Show comment
Hide comment
@stubailo

stubailo Feb 24, 2017

Member

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

Member

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

This comment has been minimized.

Show comment
Hide comment
@jbaxleyiii

jbaxleyiii Feb 24, 2017

Member
Member

jbaxleyiii commented Feb 24, 2017

@Valentin-Seehausen

This comment has been minimized.

Show comment
Hide comment
@Valentin-Seehausen

Valentin-Seehausen Feb 26, 2017

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

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

This comment has been minimized.

Show comment
Hide comment
@lewisblackwood

lewisblackwood 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!

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

This comment has been minimized.

Show comment
Hide comment
@utkarshsaxena93

utkarshsaxena93 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

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

This comment has been minimized.

Show comment
Hide comment
@karlhorky

karlhorky May 31, 2017

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

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 😄

@1attice

This comment has been minimized.

Show comment
Hide comment
@1attice

1attice 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.

1attice 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

This comment has been minimized.

Show comment
Hide comment
@alehl

alehl 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

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

This comment has been minimized.

Show comment
Hide comment
@paradite

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

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

This comment has been minimized.

Show comment
Hide comment
@rohit-ravikoti

rohit-ravikoti Dec 12, 2017

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

rohit-ravikoti commented Dec 12, 2017

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

@Didericis

This comment has been minimized.

Show comment
Hide comment
@Didericis

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

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