使用 Enzyme in React with Typescript 测试输入道具时 onChange 的正确类型答案

【问题标题】：Correct type for onChange in testing input props with Enzyme in React with Typescript使用 Enzyme in React with Typescript 测试输入道具时 onChange 的正确类型
【发布时间】：2021-09-27 21:01:07
【问题描述】：

我正在尝试测试反应形式的道具。我正在使用 Typescript 在 React 中工作。我有如下特定的密码输入：

<input
                type="password"
                className="my-2"
                onChange={handlePasswordChange}
                value={password}
            />

使用 onChange 函数：

 const handlePasswordChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        const passwordValue = event.target.value.trim();
        setPassword(passwordValue);
    };

我正在尝试像下面这样测试道具：

import React, {ChangeEventHandler} from 'react'
import {shallow, ShallowWrapper} from "enzyme";
import Login from './';

describe('<Logn /> with props test', () => {
    const loginConfig = {
        email: "kmichalski314@gmail.com",
        password: "testvalue",
        dispatch: (param: string) => {
            console.log("test")
        }
    }
    let container: ShallowWrapper;
    beforeEach(() => {
        container = shallow(<Login {...loginConfig}/>);
    })
    it('should have proper props for password field', () =>{
        console.log(container.find('input[type="password"]').props());
        expect(container.find('input[type="password"]').props()).toEqual({
            type: "password",
            className: "my-2",
            value: "testvalue",
            onChange: ChangeEventHandler<HTMLInputElement>;
        });
    })
})

我的问题是如何在 toEqual 断言中正确地键入 onChange 函数？ Jest 无法识别 onChange: ChangeEventHandler

我现在有一个语法错误：

【问题讨论】：

你不能在期望值的地方使用类型
谢谢，你是对的。我只能断言：onChange:expect.any(Function)。它有效。

标签： reactjs typescript testing jestjs enzyme

【解决方案1】：

看来您应该使用逗号而不是分号

【讨论】：