효소로 반응 성분을 테스트하는 중입니다.유형 스크립트에서 인스턴스 메서드를 찾을 수 없습니다.

효소로 반응 성분을 테스트하는 중입니다.유형 스크립트에서 인스턴스 메서드를 찾을 수 없습니다.

React 클래스 구성 요소를 테스트하려고 합니다.

우리 반에 현재 상태와 소품을 바탕으로 무언가를 계산하는 방법이 있다고 가정해 보겠습니다.

import Component from './Component'

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

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

타이프스크립트가 말합니다.Property 'someInstanceMethod' is not defined on type Component<any, any>어떻게 타이프스크립트에 우리 반이 어떻게 보이고 어떤 방법을 가지고 있는지 알려줄 수 있습니까?

이것에 대한 좋은 예가 있습니까?

호출의 구성 요소 유형을 다음으로 설정할 수 있습니다.shallow이것은 약간 보일러 플레이트이지만, 그것은 물건들을 안전하게 만듭니다.좋은 점은 포장지가 당신이 뽑는 인스턴스가 아니라 안전하다는 것입니다.

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

한 가지 가능한 해결책은 (마젤린의 의견 덕분에) 다음의 유형을 명시적으로 선언하는 것입니다.instance()방법.더 우아한 방법이 있을 수도 있습니다.

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

@marzelin과 @Chris 덕분입니다!기타 가능한 해결책

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

이것은 어디에서나 유용합니다.someInstanceMethod이벤트를 매개 변수로 수신, 유형을 명시적으로 선언합니다.component테스트 사례 작성을 위해 개발자가 원하는 것이 아닌 전체 이벤트 개체를 전달해야 합니다.

언급URL : https://stackoverflow.com/questions/44625581/testing-a-react-component-with-enzyme-typescript-cant-find-instance-methods