Question

我想测试一个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我的班级看起来如何以及它有什么方法？

这是一个很好的例子吗？

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

Answer 2

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

Answer 3

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

用酶测试React组件。 Typescript无法找到实例方法

3 个答案: