Flow cannot resolve globalized enzyme variables

[cjolowicz]

trafficstars

From jest-environment-enzyme:

This package will also simplify your test files by declaring React, and enzyme wrappers in the global scope.

This requires eslint-config-jest-enzyme to pass the linter. But how do you make your tests pass flow if they don't import mount and shallow? I'm getting this:

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/client/components/__tests__/App.jsx:10:21

Cannot resolve name mount.

      7│
      8│ describe("App", () => {
      9│   it("renders Index", () => {
     10│     const wrapper = mount(<App />);
     11│     expect(wrapper.find("Index")).toHaveLength(1);
     12│   });
     13│

[cjolowicz]

Do you provide a flow libdef? My flow libdef for jest-environment-enzyme is an autogenerated stub.

[pascalduez]

You've got to install Jest's type definitions from flow-typed.

npm i -g flow-typed if you haven't previously. flow-typed install [email protected] or any version you use.

The Jest definitions contains jest-enzyme ones.

Also from the error you pasted, I guess you need the enzyme ones as well. flow-typed install [email protected] or any version you use.

[cjolowicz]

Thanks for your response. I already have the type definitions for [email protected]:

flow-typed/npm/jest_v23.x.x.js

// flow-typed signature: 78c200acffbcc16bba9478f5396c3a00
// flow-typed version: b2980740dd/jest_v23.x.x/flow_>=v0.39.x

I presume flow is not complaining about missing type definitions, but about the missing import.

How do you tell flow that shallow and mount are available as globals?

[pascalduez]

I would create a mock file, but since a definition can't reference or import another one, I'm afraid your up for some copy/pasting of the flow-typed enzyme declaration and make it global.

Or paste that into the enzyme declaration, but it might get overridden on updates.

declare var mount: $PropertyType<$Exports<'enzyme'>, 'mount'>;
declare var shallow: $PropertyType<$Exports<'enzyme'>, 'shallow'>;