主页 / coding / 问题 / 78607993
Accepted
Viktor
Asked: 2024-06-11 21:53:59 +0800 CST

Jest - 将 FormEvent 传递给要测试的函数

  • 772

我有以下方法可以进行测试Jest（好吧，更准确地说是vitest）：

export const handleSave = async (
    dispatch: React.Dispatch<DeveloperAction>, 
    e: FormEvent<HTMLFormElement>, 
    handleClose: () => void, 
    setErrorMessage: (errorMessage: string) => void) => {

    e.preventDefault();

    const formData: FormData = new FormData(e.currentTarget)
    const developer: DeveloperType = toDeveloperType(formData)

    try {
        const resp: AxiosResponse = await axios({
            method: 'PUT', 
            url: `${endpointBackEnd}/developers/${formData.get('id')}`, 
            data: developer
        }); 
        dispatch({ 
            type: DEVELOPER_ACTION_TYPES.EDIT, 
            payload: resp.data 
        })       
        handleClose();
    } catch (err) {
        handleError(err, setErrorMessage)
    }
}

我的问题是如何传递一个FormEvent，函数可以使用该传递来创建一个，FormData然后该传递用于从中提取信息？
我应该传递一个模拟的 FormEvent 吗（我该怎么做）？或者创建一个 FormEvent 实例（问题是一样的，请问该怎么做？）

感谢您的帮助！

typescript

1 个回答

  1. Best Answer

    对于 FormEvent，您需要考虑三点：

    1. e.preventDefault();- 使用 jest 函数来模拟这个
    2. e.currentTarget- 确保将正确的 HTMLFormElement 类传递给事件
    3. formData.get('id')- 使用虚拟表单中的输入字段.name构建您的表单。.value

    选项 1. 使用 JSDom 模拟 FormData

    import { FormEvent } from 'react';
import { JSDOM } from 'jsdom';

const dom = new JSDOM('<!DOCTYPE html>'), doc = dom.window.document;
const formElement = doc.createElement('form');
const formField = doc.createElement('input');
formElement.append(formField);

formField.value = 'hi';
formField.name = 'id';

const form: Partial<FormEvent<HTMLFormElement>> = {
  currentTarget: formElement,
  preventDefault: () => jest.fn(),
};
const formData: FormData = new FormData(form.currentTarget);

const e = {
  preventDefault: jest.fn(),
  currentTarget: formElement
} as FormEvent<HTMLFormElement>;

    选项 2. 独立于 DOM 进行测试

    这个答案提供了在 jest 中模拟 FormData 类的方法： https://stackoverflow.com/a/59726560/4529555

    • 0

相关问题