Jest + Typescript 如何测试 React 组件中的方法？答案

【问题标题】：Jest + Typescript how do I test a method in the React component?Jest + Typescript 如何测试 React 组件中的方法？
【发布时间】：2017-10-17 12:50:16
【问题描述】：

我正在使用 Typescript/React 创建 .tsx 组件。我想对 React 组件中的方法进行一些单元测试。说：

export default class SomeComponent extends React.Component<undefined, SomeComponentState> {

    someMethod = (string: someInput) => {
        return someInput + someInput;
    }
    render () .. // etc
}

在 SomeComponent.test.tsx 文件中，如何导入和测试someMethod 的方法，而不是整个组件本身？

我试过了：

import {someMethod} from "./someComponent";

虽然没有运气 - 它似乎不是可调用的，并且会抛出 TS 错误：“组件没有导出的成员 someMethod”

【问题讨论】：

除非是静态方法，否则不实例化组件测试是没有意义的

标签： reactjs typescript jestjs

【解决方案1】：

它是类的成员，所以你需要一个实例来测试它。不能直接导入。如果它不需要访问实例上的任何其他内容，您可以将其提取为单独的函数并将其导出。

您也可以使用enzyme 进行测试，如下所示：从“酶”导入{shallow}；

it('.....', () => {
    const wrapper = shallow(<SomeComponent />);
    (wrapper.instance() as SomeComponent).someMethod('someValue');
})

【讨论】：

我用酶试过了；似乎也不起作用。使用您的方法，我得到“组件类型上不存在属性 someMethod”
您可能需要告诉 TS 类型，例如 wrapper.instance() as SomeComponent
好的，它可以工作，但是测试失败并出现一些模糊的错误：SyntaxError: Unexpected token < hmm ..