web-dev-qa-db-fra.com

Test d'un composant React avec Enzyme. TypeScript ne peut pas trouver les méthodes d'instance

Je veux tester un composant de classe React.

Disons que j'ai une méthode dans ma classe qui calcule quelque chose en fonction de l'état actuel et des accessoires.

import Component from './Component'

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

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

TypeScript dit Property 'someInstanceMethod' is not defined on type Component<any, any>. Comment puis-je dire à Typscript à quoi ressemble ma classe et quelles sont ses méthodes?

Y a-t-il un bon exemple pour cela?

reactjstypescriptenzyme
17
Chris

Vous pouvez définir le type de composant dans l'appel sur shallow. Il s'agit d'un peu de plaque biologique, mais cela rend les choses sûres. La bonne chose est que le wrapper est sûr pour les types, pas seulement l'instance que vous retirez.

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();
});
16
Shane

Une solution possible (grâce au commentaire de marzelin) est de déclarer explicitement le type de la méthode instance(). Il pourrait y avoir des façons plus élégantes de le faire.

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
});
22
Chris

Merci à @marzelin et @Chris! Autre solution possible

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

Cela est pratique lorsque someInstanceMethod reçoit un événement en tant que paramètre, déclare explicitement le type comme component vous oblige à passer tout l'objet d'événement qui n'est pas quelque chose qu'un développeur veut pour écrire des cas de test.

0
mukuljainx