Início / coding / Perguntas / 78607993
Accepted
Viktor
Asked: 2024-06-11 21:53:59 +0800 CST

Jest - passando FormEvent para função a ser testada

  • 772

Eu tenho o seguinte método que gostaria de testar Jest(bem, mais precisamente com 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)
    }
}

Minha dúvida é sobre como passar um FormEventque a função pode usar para criar um FormDataque posteriormente será usado para extrair informações?
Devo passar um FormEvent simulado (como posso fazer isso)? Ou crie uma instância de FormEvent (a pergunta é a mesma, como fazer isso, por favor?)

Obrigado pela ajuda!

typescript

1 respostas

  1. Best Answer

    Existem três pontos que você precisa pensar para o FormEvent:

    1. e.preventDefault();- use uma função de brincadeira para zombar disso
    2. e.currentTarget- certifique-se de que a classe HTMLFormElement correta seja passada para o evento
    3. formData.get('id')- construa seu formulário usando .namee .valuede campos de entrada no formulário virtual.

    Opção 1. Use JSDom para simular o 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>;

    Opção 2. Teste isolado do DOM

    Esta resposta fornece o método para zombar da classe FormData de brincadeira: https://stackoverflow.com/a/59726560/4529555

    • 0

relate perguntas