Tengo un formulario validado por la API de validación de formularios HTML5. En este formulario, hay un archivo de entrada obligatorio, que en la prueba siempre falla la validación, como si estuviera vacío. Uso fireEvent.change para ingresar un archivo simulado, pero solo funciona en el evento de cambio, no en el envío. La entrada del archivo siempre se marca como no válida en el evento de envío. ¿Cómo puedo probar la función de validación exitosa?

El código simplificado del componente:

 const ExampleComponent = () => { const submitForm = async e => { e.preventDefault(); let form = e.target; // just for debugging, always prints the fileInputExample Array.from(form.elements).forEach(input => { if (!input.validity.valid) { console.log(input.id); } }); let formData = new FormData(form); let body = Object.fromEntries(formData); console.log(body); // always prints { fileInputExample: {} } if (form.reportValidity()) { // always fails // some logic here console.log('success'); // here's where I'm trying to get to } else { console.log('validation fail'); // always prints this one } }; const changeFile = e => { let input = e.target; if (input.files.length === 0) { input.setCustomValidity(''); console.log('no file'); } else if (input.files[0].type === 'text/html') { input.setCustomValidity(''); console.log('valid file'); // prints this one } else { input.setCustomValidity('O tipo do arquivo deve ser .html'); console.log('wrong file'); } }; return ( <S.Form onSubmit={submitForm}> <Input type="file" label="Example label" id="fileInputExample" name="fileInputExample" required accept="text/html" onChange={changeFile} helperText="O arquivo deve ser um HTML" /> <button type="submit">Save</button> </S.Form> ); }

La prueba:

 test('envia formulário completo', async () => { render(<ExampleComponent />); const file = new File(['(⌐□_□)'], 'chucknorris.html', { type: 'text/html' }); fireEvent.change(screen.getByLabelText('Example label'), { target: { files: [file] } }); expect(screen.getByLabelText('Example label').files[0].name).toBe( 'chucknorris.html' ); //passes userEvent.click(screen.getByText('Save')); expect(console.log).toHaveBeenCalledWith('sucesso'); // fails });

PD: tengo el console.log burlado