Apollo-client: @apollo/react-testing MockedProvider Typescript Error

[mkaraula]

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`

[maxcan]

I've identified the cause and workaround. in @apollo/react-testing/lib/mocks/MockedProvider.d.ts the first line is import React from 'react'. If you dont have synthetic imports turned on in tsconfig, you get this error.

the quickest workaround is to add "allowSyntheticDefaultImports": true, to tsconfig.json. Ideally apollo would fix the import to be import * as React from 'react'. Not sure why this just came up now though

[mkaraula]

You are a legend! Thank you Max.

Would like to contribute a fix but I am not really sure where this declaration file is being generated. I suspect it is coming from
https://github.com/apollographql/react-apollo/blob/master/packages/testing/src/mocks/MockedProvider.tsx
but I am not a 100% sure.

Edit:
figured it out 😅

[marharyta]

That is weird, seems like @maxcan I do have "allowSyntheticDefaultImports": true, in my tsconfig.json, yet I still do get the error

[maxcan]

@marharyta not sure whats happening in your case. the codebases have diverged quite a bit since I used that workaround

[mkaraula]

Looks like my PR is absolete now. I am not really sure what the changes where but seems like files got moved quite a bit and I cant find MockedProvider.tsx.

Pinging @hwillson one last time. Any idea how to apply the fix in https://github.com/apollographql/react-apollo/pull/3507 to the current state of master?

[hwillson]

@mkaraula MockedProvider has been moved in the Apollo Client 3 beta. For more details see: https://www.apollographql.com/docs/react/v3.0-beta/migrating/apollo-client-3-migration/#apolloreact-testing

Switching to use import * as ... is not something we're interested in doing at this time. Actually, we used to and have since moved away from it. If this is an issue, we highly recommend using TypeScript's esModuleInterop compiler option (which is recommended to be enabled by default for newer TypeScript projects by the TS team themselves). For a more detailed explanation of why we recommend this, see https://itnext.io/great-import-schism-typescript-confusion-around-imports-explained-d512fc6769c2. Thanks!

[mkaraula]

It worked. Thanks a lot!

[tommaton]

@mkaraula what was your fix for this as I'm running into this same issue and cant for the life of me get it working based on any of the suggests mentioned above.

[mkaraula]

@mkaraula what was your fix for this as I'm running into this same issue and cant for the life of me get it working based on any of the suggests mentioned above.

"compilerOptions": { "esModuleInterop": true } in tsconfig.json

[tommaton]

@mkaraula

@mkaraula what was your fix for this as I'm running into this same issue and cant for the life of me get it working based on any of the suggests mentioned above.

"compilerOptions": { "esModuleInterop": true } in tsconfig.json

I was hoping that would resolve it, unfortunately it didn't.
Back to the drawing board...

[davidcostadev]

I'm getting this error too :-(

[adriencohen]

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