Definitelytyped: [enzyme] 3.1.11: TSC does not infer types for mount()

[akx]

• I tried using the @types/enzyme package and had problems.
• I tried using the latest stable version of tsc. (Yes, using 2.9.2)
• Mention: @Hotell (as the author of https://github.com/DefinitelyTyped/DefinitelyTyped/pull/26565)

After upgrading to @types/enzyme 3.1.11 I'm getting

"Property 'dismissed' does not exist on type 'Readonly<{}>'."

with code like

const wrapper = mount(<MessageList />);
expect(wrapper.state().dismissed).toBe(true);

where MessageList is this, imported from another .tsx file:

interface MessageListState {
  messages: Message[];
  dismissed: boolean;
}

export default class MessageList extends Component<{}, MessageListState> {
  // ...
}

Changing mount() to mount<MessageList>(...) doesn't help.
Only exporting MessageListState and spelling out the entire signature like mount<MessageList, {}, MessageListState>(<MessageList />) does... but that's, shall we say, suboptimal.

Rolling back to 3.1.10 fixes this, but the type of wrapper.state() is any.

What do I need to do to get the inference to work without having to spell everything out, like it works in the PR's test?

[Hotell]

just to double check. Are you using strict:true ?

[Hotell]

This change was non breaking, just to support instance. To be able to get all props,state method with proper type you need to provide them explicitly as before:

[Hotell]

ha but now thanks to your issue I find a typo that I did in that PR ! thanks ! :D

gonna submit PR immediately, which will make it work as you would like to ->

const wrapper = mount<MessageList>(<MessageList />);

[akx]

@Hotell Thank you!

[adidahiya]

I'm running into this problem after updating react & enzyme types. Why can't tsc infer the generics? I have a lot of mount() calls in my test code and now to prevent my code from getting too verbose, I have to redefine the type of mount when I import it at the top of the file by specifying the generic type params for the component I'm testing, like this:

import {
    mount as untypedMount,
    MountRendererProps,
    shallow as untypedShallow,
    ShallowRendererProps,
    ShallowWrapper,
} from "enzyme";

// tslint:disable no-unnecessary-callback-wrapper
const mount = (el: React.ReactElement, options?: MountRendererProps) => untypedMount<TagInput>(el, options);
const shallow = (el: React.ReactElement, options?: ShallowRendererProps) => untypedShallow<TagInput>(el, options);
// tslint:enable no-unnecessary-callback-wrapper

is there a better way?

[jtomaszewski]

I'm also using TS 3.2.2 and @types/enzyme 3.9.1 and mount doesn't infer generics.

Why not? Is it possible to improve it? Is there an issue on it?

EDIT:

There is: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/26039 . More info why isn't it possible to infer the component type from the element argument: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/26039#issuecomment-392216688 .