Skip to content
This repository has been archived by the owner on Apr 13, 2023. It is now read-only.

Apollo MockedProvider with client directives #2508

Closed
KamalAman opened this issue Oct 16, 2018 · 12 comments
Closed

Apollo MockedProvider with client directives #2508

KamalAman opened this issue Oct 16, 2018 · 12 comments
Assignees

Comments

@KamalAman
Copy link

Intended outcome:
When using a MockedProvider and a query with client directives, the client directives should resolve

Actual outcome:

Client directives are unrecognized and console warns a message. There does not seem a way to specify apollo-link-state on the MockedProvider, which means any component using a client directive in its query is not really testable.

How to reproduce the issue:
Use a @client in a query, and then run the mockedProvider, the client directive will not be resolved.

Version

ajmath pushed a commit to ajmath/react-apollo that referenced this issue Oct 22, 2018
@Rafe
Copy link

Rafe commented Nov 19, 2018

Faced the same problem, created a branch to integrate apollo-link-state with it.

https://github.com/Rafe/react-apollo/commit/1979d07ad2290856f7db3f8a0133002bf71f8cc8

In this commit, I added the clientState props to MockedProvider, and add state-link to the client inside MockedProvider, and it fits my need to test a complex component.

Open the links for passing the state link is also an option and can drop the apollo-link-state support.

Any thought?

@ajmath ajmath mentioned this issue Dec 27, 2018
3 tasks
@jhpedemonte
Copy link

jhpedemonte commented Feb 12, 2019

I was able to get this working using the cache property for MockedProvider. If set, it's used as the cache for the ApolloClient instance that is created. Here's some pseudo-code of what I got working:

const cache = new InMemoryCache().restore({
  ROOT_QUERY: {
    someQueryName: {
      type: 'id',
      id: 'SOME-QUERY-NAME-ID',
      generated: false,
    },
  },
  'SOME-QUERY-NAME-ID': {
    a: 1,
    prop: true,
    or: 'hello',
    two: 3,
    __typename: 'SomeQuery',
  },
});

render(
  <MockedProvider cache={cache}>
    <ComponentWhichMakesSomeQuery />
  </MockedProvider>
);

(Hope that makes sense)

hwillson pushed a commit that referenced this issue Mar 7, 2019
* Adds test for #2508

* Allow @client fields in the `MockedProvider` link chain by default

Apollo Client 2.5 handles `@client` fields locally, which means
when using local resolvers, `@client` fields aren't sent through
AC's configured link chain. To allow people to upgrade to AC 2.5
painlessly, local `@client` handling has to be enabled by
setting local resolvers. If local resolvers aren't set, the
`@client` field is still sent through the link chain.

`MockedProvider` was updated to include a `resolvers` prop, that
can be used to pass local resolvers into the `ApolloClient`
instance it uses internally for testing. The `resolvers` prop
was given a default value of `{}` however, which means AC's
local resolver support is always enabled, and also means that
`MockedProvider` can't be used for tests that require the
`@client` field to be passed through the link chain. When we hit
Apollo Client 3.0, this won't be necessary, but for now we need
to be flexible about this, since people might have updated to
Apollo Client 2.5, but are still using and testing local state
using `apollo-link-state`.

Long story short, this commit removes the `resolvers` default,
which means by default `MockedProvider` isn't using AC 2.5's new
local state handling. It has to be enabled by prodiving
local resolvers via the `MockedProvider` `resolvers` prop.

* Updated @client tests

* Changelog update
@city41
Copy link

city41 commented Mar 20, 2019

When using apollo-client 2.4.8 and react-apollo 2.4.0, MockedProvider handled @client directives correctly for us. Upon upgrading to 2.5.1, we find it now ignores them and does not resolve them.

I have a small query like this:

query isLoadingQuery {
    loadingStatus @client {
        isLoading
    }
}

and a test like

const mock = {
    request: {
        query: isLoadingQuery
    },
    result: {
        data: {
            loadingStatus: {
                isLoading: true
            }
        }
    }
};

describe('Pace', function() {
    it('should render pace when loading', function() {
        const wrapper = mount(
            <MockedProvider mocks={[mock]} addTypename={false}>
                <ApolloPace height={25} />
            </MockedProvider>
        );

        expect(wrapper.children().html()).toBeNull();

        return waitForExpect(() => {
            wrapper.update();
            expect(wrapper.children().html()).not.toBeNull();
        });
    });
});

This test used to pass before the upgrade. Now I can only get it to pass by removing @client directive from the query doc

@nshoes
Copy link

nshoes commented Mar 20, 2019

@city41 having the same issues. Asked on Spectrum a few days ago but no response :( @hwillson?

@nshoes
Copy link

nshoes commented Mar 20, 2019

Related: ardatan/graphql-tools#916

@hwillson hwillson self-assigned this Mar 20, 2019
@hwillson
Copy link
Member

This was fixed in #2524, and will be included in the next react-apollo release. We're hoping to push a new version out later today / tomorrow.

@nshoes
Copy link

nshoes commented Mar 20, 2019

Y A S

Awesome, thanks.

@nshoes
Copy link

nshoes commented Mar 22, 2019

@hwillson any chance it'll be released today?

@hwillson
Copy link
Member

Fixed in #2524. Thanks!

@pdemarino
Copy link

I am still having this issue with this setup:

├─ @apollo/[email protected]
├─ @apollo/[email protected]
│ ├─ @apollo/react-common@^3.0.1
│ ├─ @apollo/react-hooks@^3.0.1
├─ @apollo/[email protected]
│ ├─ @apollo/react-common@^3.0.1
│ ├─ @apollo/react-components@^3.0.1
├─ @apollo/[email protected]
│ ├─ @apollo/react-common@^3.0.1
├─ @apollo/[email protected]
│ ├─ @apollo/react-common@^3.0.1
│ ├─ @apollo/react-hooks@^3.0.1
├─ @apollo/[email protected]
│ ├─ @apollo/react-common@^3.0.1
├─ @apollographql/[email protected]
│ └─ [email protected]
├─ @apollographql/[email protected]
├─ [email protected]
│ ├─ apollo-cache-inmemory@^1.6.3
│ ├─ apollo-cache@^1.3.2
│ ├─ apollo-client@^2.6.4
│ ├─ apollo-link-error@^1.0.3
│ ├─ apollo-link-http@^1.3.1
│ ├─ apollo-link@^1.0.6
├─ [email protected]
│ ├─ [email protected]
├─ [email protected]
│ ├─ apollo-cache@^1.3.2
│ ├─ apollo-utilities@^1.3.2
├─ [email protected]
│ ├─ apollo-utilities@^1.3.2
├─ [email protected]
│ ├─ [email protected]
│ ├─ apollo-link@^1.0.0
│ ├─ [email protected]
├─ [email protected]
│ ├─ [email protected]
│ └─ [email protected]
├─ [email protected]
├─ [email protected]
│ ├─ [email protected]
│ ├─ apollo-graphql@^0.3.3
│ ├─ [email protected]
│ ├─ [email protected]
│ ├─ [email protected]
│ ├─ @apollographql/apollo-tools@^0.4.0
│ ├─ [email protected]
│ └─ [email protected]
├─ [email protected]
├─ [email protected]
│ ├─ [email protected]
├─ [email protected]
│ ├─ apollo-link-http-common@^0.2.14
│ ├─ apollo-link@^1.2.12
├─ [email protected]
│ ├─ apollo-link@^1.2.12
├─ [email protected]
│ ├─ apollo-link-http-common@^0.2.14
│ ├─ apollo-link@^1.2.12
├─ [email protected]
│ ├─ apollo-utilities@^1.3.0
├─ [email protected]
├─ [email protected]
│ ├─ @apollographql/apollo-tools@^0.4.0
│ ├─ @apollographql/[email protected]
│ ├─ [email protected]
│ ├─ [email protected]
│ ├─ [email protected]
│ ├─ [email protected]
│ ├─ [email protected]
│ ├─ [email protected]
│ ├─ [email protected]
│ ├─ [email protected]
│ ├─ [email protected]
│ │ ├─ @apollographql/apollo-tools@^0.4.0
│ │ ├─ [email protected]
│ │ └─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
│ ├─ @apollographql/[email protected]
│ ├─ [email protected]
│ ├─ [email protected]
│ ├─ [email protected]
├─ [email protected]
│ └─ [email protected]
├─ [email protected]
│ ├─ [email protected]
│ ├─ [email protected]
│ └─ [email protected]
├─ [email protected]
│ ├─ [email protected]
├─ [email protected]
│ ├─ @apollo/react-testing@^3.0.0
│ ├─ apollo-boost@^0.4.3
│ ├─ react-apollo@^3.0.0
│ ├─ apollo-server-lambda@^2.8.1
│ ├─ @apollographql/apollo-tools@^0.4.0
│ ├─ [email protected]
│ └─ [email protected]
│ ├─ apollo-link@^1.2.3
│ ├─ apollo-utilities@^1.0.1
├─ [email protected]
│ ├─ @apollo/react-common@^3.0.1
│ ├─ @apollo/react-components@^3.0.1
│ ├─ @apollo/react-hoc@^3.0.1
│ ├─ @apollo/react-hooks@^3.0.1
│ └─ @apollo/react-ssr@^3.0.1

@Paddy-Hamilton
Copy link

I am also seeing a @client warning and not the expected behaviour so my test fails
I have all the latest versions

    "apollo-boost": "^0.4.4",
    "apollo-cache-inmemory": "^1.6.3",
    "apollo-client": "^2.6.4",
    "apollo-link": "^1.2.12",
    "apollo-link-error": "^1.1.11",
    "apollo-link-http": "^1.5.15",
    "apollo-link-state": "^0.4.2",
    "@apollo/react-hooks": "^3.0.1",
    "@apollo/react-ssr": "^3.0.1",
    "@apollo/react-testing": "^3.0.1",

Query

query EDIT_CAKE_MODAL_OPEN {
  editCakeModalOpen @client
}

Test

import React from "react";
import "@testing-library/jest-dom/extend-expect";
import { render } from "@testing-library/react";
import { MockedProvider } from "@apollo/react-testing";
import { fakeCake } from "../../lib/testUtils";
import EditCakeModal from "./index";
const cake = fakeCake("ASD123");
const defaultProps = {
  ...cake
};
import { EDIT_CAKE_MODAL_OPEN } from "../../graphql/queries.graphql";

const mocks = [
  {
    request: {
      query: EDIT_CAKE_MODAL_OPEN
    },
    result: {
      data: {
        editCakeModalOpen: true
      }
    }
  }
];
describe("<EditCakeModal/>", () => {
  test("renders when open", () => {
    const { container, queryByLabelText } = render(
      <MockedProvider mocks={mocks} addTypename={false}>
        <EditCakeModal {...defaultProps} />
      </MockedProvider>
    );
    expect(queryByLabelText("Name")).not.toBeInTheDocument();

    expect(container).toMatchSnapshot();
  });
});

warning
Found @client directives in a query but no ApolloClient resolvers were specified. This means ApolloClient local resolver handling has been disabled, and @client directives will be passed through to your link chain.

@DenVilden
Copy link

DenVilden commented Feb 25, 2020

For someone who still experience this problem, adding __typename solved it for me

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

9 participants