Jest + Typescript how do I test a method in the React component?

Question

I'm creating .tsx components with Typescript/React. I want to do some unit tests of the methods inside the React component. Say:

export default class SomeComponent extends React.Component<undefined, SomeComponentState> {

    someMethod = (string: someInput) => {
        return someInput + someInput;
    }
    render () .. // etc
}

In a SomeComponent.test.tsx file, how do I import and test the method of someMethod, and not the whole component itself?

I've tried:

import {someMethod} from "./someComponent";

though without luck - it doesn't seem to be invokable, and will throw TS error: "component has no exported member someMethod"

Unless it's a static method, it makes no sense to test it without instantiating a component — Ruan Mendes
– Ruan Mendes, Commented Oct 17, 2017 at 13:13

WayneC · Accepted Answer · 2017-10-17 13:10:52Z

5

Its a member of the class, so you need an instance to test it. You can't import it directly. If it doesn't need to access to anything else on the instance, you can extract it as a seperate function and export it.

Alternatively using enzyme you could test it with something like this: import {shallow} from 'enzyme';

it('.....', () => {
    const wrapper = shallow(<SomeComponent />);
    (wrapper.instance() as SomeComponent).someMethod('someValue');
})

edited Oct 17, 2017 at 13:10

answered Oct 17, 2017 at 13:08

WayneC

5,7402 gold badges35 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

cbll Over a year ago

I've tried with Enzyme; Doesn't seem to work either. With your method, I get "Property someMethod does not exist on on type Component"

WayneC Over a year ago

you might need to tell TS the type eg wrapper.instance() as SomeComponent

cbll Over a year ago

Okay, it works, however the test fails with some obscure error: SyntaxError: Unexpected token < hmm ..

Collectives™ on Stack Overflow

Jest + Typescript how do I test a method in the React component?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related