用 Enzyme 测试一个 React 组件。打字稿找不到实例方法

Question

我想测试一个 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>。我如何告诉 Typscript 我的类的外观以及它有哪些方法？

这方面有什么好的例子吗？

Answer 1

您可以将调用中的组件类型设置为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();
});

Answer 2

感谢@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 要求您传递整个事件对象，这不是开发人员在编写测试用例时想要的。

Answer 3

一种可能的解决方案（感谢 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
});