typescript 使用 Enzyme 测试 React 组件。打字稿找不到实例方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44625581/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Testing a React component with Enzyme. Typescript can't find instance methods
提问by Chris
I want to test a React class component.
我想测试一个 React 类组件。
Let's say I have a method in my class that computes something based on the current state and props.
假设我的类中有一个方法可以根据当前状态和道具计算一些东西。
import Component from './Component'
const wrapper = enzyme.shallow(<Component {...props} />);
it('does something', () => {
expect(wrapper.instance().someInstanceMethod(input)).toBe(true);
});
Typescript says Property 'someInstanceMethod' is not defined on type Component<any, any>. How can I tell Typscript how my class is looking and what methods it has?
打字稿说Property 'someInstanceMethod' is not defined on type Component<any, any>。我怎样才能告诉 Typscript 我的类的外观和它有哪些方法？
Is there a good example for this?
有没有一个很好的例子？
回答by Chris
One possible solution (thanks to the comment from marzelin) is to explicitly declare the type of the instance()method. There might be more elegant ways to do this.
一种可能的解决方案（感谢来自 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
});
回答by Shane
You can set the component type in the call to shallow. This is a little bit of boilerplate, but it makes things typesafe. The good thing is that the wrapper is typesafe, not just the instance you pull out.
您可以在调用中设置组件类型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();
});
回答by mukuljainx
Thanks to @marzelin and @Chris! Other possible solution
感谢@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
});
This comes in handy where someInstanceMethodreceives event as parameter, explicitly declare type as componentrequires you to pass whole event object which is not something a developer want for writing test cases.
这在someInstanceMethod接收事件作为参数的情况下派上用场，显式声明类型component要求您传递整个事件对象，这不是开发人员编写测试用例时想要的。
