Testing a React component with Enzyme. Typescript can't find instance methods

Question

I want to test a React class component.

Let's say I have a method in my class that computes something based on the current state and props.

import Component from './Component'

const wrapper = enzyme.shallow(<Component {...props} />);

it('does something', () => {
  expect(wrapper.instance().someInstanceMethod(input)).toBe(true);
});

Typescript says Property 'someInstanceMethod' is not defined on type Component<any, any>. How can I tell Typscript how my class is looking and what methods it has?

Is there a good example for this?

you can always use type assertion: `(wrapper.instance() as typeof ComponentInstance).someInstanceMethod()` — marzelin, Jun 19 '17 at 09:08

score 28 · Accepted Answer · edited May 12 '20 at 08:48

You can set the component type in the call to shallow. This is a little bit of boilerplate, but it makes things typesafe. The good thing is that the wrapper is typesafe, not just the instance you pull out.

import Component from './Component'

// Wrapper will know the type of the component.
const wrapper = enzyme.shallow<Component>(<Component {...props} />);

it('does something', () => {
  expect(wrapper.instance().someInstanceMethod(input)).toBe(true);
  // You can also get the state from the wrapper.
  expect(wrapper.state().someComponentState).toBeTruthy();
});

score 26 · Answer 2 · edited Mar 07 '18 at 05:03

26

One possible solution (thanks to the comment from marzelin) is to explicitly declare the type of the instance() method. There might be more elegant ways to do this.

import Component from './Component'

const wrapper = enzyme.shallow(<Component {...props} />);
const instance = wrapper.instance() as Component; // explicitly declare type

it('does something', () => {
  expect(instance.someInstanceMethod(input)).toBe(true); // no TS error
});

edited Mar 07 '18 at 05:03

ericsoco

24,913
29
97
127

answered Jun 21 '17 at 12:36

Chris

2,069
3
22
27

2

what happens if function is private? ts has an error: Property 'someInstanceMethod' is private and only accessible within class 'Component'. – jhonny lopez Jun 04 '18 at 23:42
@jhonnylopez ive got the same issue, did you find a solution? – mlg87 Nov 27 '18 at 18:55
1

This worked. But I am curious as to why it cannot figure it out... Just cost me hours of my day. – Contristo Jan 15 '19 at 03:05
I get : "Component refers to a value but is used as a type here" – Sytham Oct 14 '19 at 13:53
@Sytham Can you try changing your file extension to `.tsx`? – sshh Jan 03 '20 at 20:50

score 0 · Answer 3 · answered Jun 26 '18 at 10:25

Thanks to @marzelin and @Chris! Other possible solution

import Component from './Component'

const wrapper = enzyme.shallow(<Component {...props} />);
const instance = wrapper.instance() as any; // explicitly declare type

it('does something', () => {
  expect(instance.someInstanceMethod(input)).toBe(true); // no TS error
});

This comes in handy where someInstanceMethod receives event as parameter, explicitly declare type as component requires you to pass whole event object which is not something a developer want for writing test cases.

Testing a React component with Enzyme. Typescript can't find instance methods

3 Answers3

Linked

Related