web-dev-qa-db-ja.com

EnzymeでReactコンポーネントをテストします。TypeScriptはインスタンスメソッドを見つけることができません

Reactクラスコンポーネントをテストしたい。

クラスに現在の状態と小道具に基づいて何かを計算するメソッドがあるとしましょう。

import Component from './Component'

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

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

TypeScriptはProperty 'someInstanceMethod' is not defined on type Component<any, any>。クラスがどのように見えるか、どのメソッドを持っているかをTypscriptに伝えるにはどうすればよいですか？

これの良い例はありますか？

reactjstypescriptenzyme
17
Chris

shallowの呼び出しでコンポーネントタイプを設定できます。これはbiolerplateの少しですが、物事をタイプセーフにします。良いことは、ラッパーはタイプセーフであり、取り出すインスタンスだけではないということです。

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

1つの可能な解決策（marzelinからのコメントのおかげ）は、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
});
22
Chris

@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として型を明示的に宣言する場合に便利です。イベントオブジェクト全体を渡す必要があります。

0
mukuljainx