question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

@apollo/react-testing MockedProvider Typescript Error

See original GitHub issue

I am tryng to use MockedProvider in Typescript but I get the following Error:

JSX element type 'MockedProvider' is not a constructor function for JSX elements.
  Type 'MockedProvider' is missing the following properties from type 'ElementClass': context, setState, forceUpdate, props, and 2 more.ts(2605)
JSX element class does not support attributes because it does not have a 'props' property.ts(2607)

Its the same Issue as in https://github.com/apollographql/apollo-client/issues/5208 which got closed after OP upgraded to 3.1.0 but I am still having the same Issue after upgrading.

How to reproduce the issue:

Here is one of the Tests where I am getting the error:

import * as React from "react";
import "jest-enzyme";
import { mount } from "enzyme";
import { MockedProvider } from "@apollo/react-testing";
import { act } from "react-dom/test-utils";
import NEW_PARTNER from "./api/mutations";
import MyExampleComponent from "./MyExampleComponent";

const useMutationMock = [
  {
    request: {
      query: NEW_PARTNER,
      variables: {
        name: "Foobar Partner",
      },
    },
    result: {
      data: { newPartner: { id: "815" } },
    },
  },
];

describe("<MyExampleComponent />", () => {
  it("renders a <MyExampleChildComponent />", async () => {
    await act(async () => {
      const wrapper = mount(
        <MockedProvider mocks={useMutationMock} addTypename={false}>
          <MyExampleComponent />
        </MockedProvider>
      );
      expect(wrapper).toContainMatchingElement("MyExampleChildComponent");
    });
  });
});

package.json:

    "@apollo/react-common": "^3.0.1",
    "@apollo/react-hooks": "^3.1.0",
    "@apollo/react-testing": "^3.1.0",

Versions

OS: macOS 10.14.6
  Binaries:
    Node: 10.16.0 - /usr/local/bin/node
    npm: 6.11.2 - /usr/local/bin/npm
  Browsers:
    Chrome: 76.0.3809.132
    Firefox: 68.0.2
    Safari: 12.1.2
  npmPackages:
    apollo-cache-inmemory: ^1.6.3 => 1.6.3
    apollo-client: ^2.6.4 => 2.6.4
    apollo-link: ^1.2.12 => 1.2.13
    apollo-link-error: ^1.1.11 => 1.1.12
    apollo-link-http: ^1.5.15 => 1.5.16`

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:6
  • Comments:14 (1 by maintainers)

github_iconTop GitHub Comments

8reactions
adriencohencommented, Aug 27, 2020

We have the same issue switching from "@apollo/react-testing": "3.1.4", to "@apollo/client": "3.1.3" or "@apollo/client": "3.0.2", for now I have this sketchy “fix”:

import { MockedProvider as MockedProviderBroken } from '@apollo/client/testing';
import { MockedProviderProps, MockedProviderState } from '@apollo/client/utilities/testing/mocking/MockedProvider';

const MockedProvider = MockedProviderBroken as React.ComponentClass<MockedProviderProps, MockedProviderState>;
2reactions
hkievetcommented, Mar 12, 2021

This was still an issue in version 3.3.3 for me. @adriencohen’s solution worked for me.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Testing - Apollo GraphQL Docs
The MockedProvider component is a mocked version of ApolloProvider that doesn't send network requests to your API. Instead, you to specify the exact ......
Read more >
apollo's MockedProvider doesn't warn clearly about missing ...
When this happens, MockedProvided returns a NetworkError to the component. However in the test suite, no warning is displayed. This is ...
Read more >
Debugging Apollo GraphQL MockedProvider - Swarmia
You may eventually figure it out by console-logging the error returned ... import { MockLink } from '@apollo/react-testing' interface Props ...
Read more >
apollo's MockedProvider doesn't warn clearly about missing ...
Coding example for the question apollo's MockedProvider doesn't warn clearly ... from '@apollo/react-testing'; import {onError} from "apollo-link-error"; ...
Read more >
@apollo/react-testing - npm
@apollo/react-testing. TypeScript icon, indicating that this package has built-in type declarations. 4.0.0 • Public • Published 2 years ago.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found