Question

在这样的简单情况下

function onSubmit() { e.preventDefault(); /* Some Submit Logic */ }

<form data-testid="form" onSubmit={(e) => onSubmit(e)}>
   <button type="submit" data-testid="submit-button">Submit</button>
</form>

如何确保单击提交按钮时提交表单？

const { queryByTestId } = render(<LoginForm/>);
const LoginForm = queryByTestId("form")
const SubmitButton = queryByTestId("submit-button")
fireEvent.click(SubmitButton)

???

如何测试是否已调用onSubmit（）或表单已提交？

Answer 1

基本上，这是我“解决”的问题：

// LoginForm.js

export function LoginForm({ handleSubmit }) {

     const [name, setName] = useState('');

     function handleChange(e) {
         setName(e.target.value)
     }

     return (
         <form data-testid="form" onSubmit={() => handleSubmit({ name })}>
              <input required data-testid="input" type="text" value={name} onChange={(e) => handleChange(e)}/>
              <button type="submit" data-testid="submit-button">Submit</button>
         </form>
     )
}

export default function LoginPage() {

    function handleSubmit(e) {
        // submit stuff
    }

    return <LoginForm handleSubmit={(e) => handleSubmit(e)}/>

}

现在测试的文件：

// LoginForm.test.js

import React from 'react';
import { render, fireEvent } from "@testing-library/react";
import LoginPage, { LoginForm } from "./LoginPage";

it("Form can be submited & input field is modifiable", () => {

    const mockSubmit = jest.fn();
    const { debug, queryByTestId } = render(<LoginForm handleSubmit={mockSubmit}/>);

    fireEvent.change(queryByTestId("input"), { target: { value: 'Joe Doe' } }); // invoke handleChange
    fireEvent.submit(queryByTestId("form"));

    expect(mockSubmit).toHaveBeenCalled(); // Test if handleSubmit has been called 
    expect(mockSubmit.mock.calls).toEqual([[{name: 'Joe Doe'}]]); // Test if handleChange works

});

Answer 2

我建议使用 nock 拦截从表单发送的请求并在之后返回模拟响应。例如：

nock('https://foo.bar').post('/sign-up', formValues).reply(201);

但我想知道更好的解决方案。

@ testing-library /反应测试表单onSubmit

2 个答案: