Javascript 当表单中必需的输入字段为空时，如何模拟未调用提交处理程序？

我最近开始使用Jest和react测试库进行测试。但我遇到了一个小问题。我正在测试我的组件，如下所示：

import React, { useState } from 'react';

const Login = () => {
  const [username, setUsername] = useState<string>('');
  const [password, setPassword] = useState<string>('');

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
  };

  return (
    <div>
      <form onSubmit={handleSubmit} data-testid="loginForm">
        <label>
          Username:
          <input
            required
            type="text"
            data-testid="usernameText"
            placeholder="e.g. JohnLukeThe3rd"
            value={username}
            onChange={(event) => setUsername(event.target.value)}
            autoFocus
          />
        </label>
        <label>
          Password:
          <input
            required
            type="password"
            data-testid="passwordText"
            placeholder="e.g. ••••••••••"
            value={password}
            onChange={(event) => setPassword(event.target.value)}
          />
        </label>
        <input type="submit" data-testid="loginButton" value="Login" />
      </form>
    </div>
  );
};

export default Login;

import React，{useState}来自“React”；
常量登录=（）=>{
const[username，setUsername]=useState（“”）；
const[password，setPassword]=useState（“”）；
const handleSubmit=（事件：React.FormEvent）=>{
event.preventDefault（）；
};
返回(
用户名：
setUsername（event.target.value）}
自动对焦
/>
密码：
setPassword（event.target.value）}
/>
);
};
导出默认登录；

据我所知，提交表单时不会调用onSubmit，但表单的必需输入字段为空。我通过在handleSubmit中插入一个console.log（'Hey'）来检查这种行为，但没有打印任何内容。所以，我认为在我的测试中也应该发生同样的事情。当我检查输入为空时提交处理程序是否没有被调用时，它应该会成功。但事实并非如此。它失败了

以下是测试代码：

import React from 'react';
import {
  render,
  fireEvent,
  cleanup,
  RenderResult,
} from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Login from '../components/Login';

describe('<Login />', () => {
  let screen: RenderResult;
  beforeEach(() => {
    screen = render(<Login />);
  });
  afterEach(cleanup);

  describe('typing user info', () => {
    it('shows username and password', async () => {
      expect(screen.queryByDisplayValue('JohnLukeThe3rd')).toBeNull();
      await userEvent.type(
        screen.getByLabelText(/username/i),
        'JohnLukeThe3rd',
      );
      await userEvent.type(screen.getByLabelText(/password/i), 'Password123');
      expect(screen.queryByDisplayValue('JohnLukeThe3rd')).toBeInTheDocument();
      expect(screen.queryByDisplayValue('Password123')).toBeInTheDocument();
    });
  });

  describe('clicking login button', () => {
    let loginButton: HTMLElement;
    let submitHandler: jest.Mock;
    let form: HTMLElement;

    beforeEach(() => {
      loginButton = screen.getByText(/login/i);
      submitHandler = jest.fn((e) => e.preventDefault());
      form = screen.getByTestId(/loginForm/i);
      form.onsubmit = submitHandler;
    });


    // problem area here
    it('does not call submit handler if fields empty', () => {
      expect(submitHandler).not.toHaveBeenCalled();
      userEvent.click(loginButton);
      expect(submitHandler).not.toHaveBeenCalled();
    });
    // problem area ends


    it('calls submit handler if fields non-empty', async () => {
      expect(submitHandler).not.toHaveBeenCalled();
      const usernameField = screen.getByTestId('usernameText');
      const passwordField = screen.getByTestId('passwordText');
      await userEvent.type(usernameField, 'JohnLukeThe3rd');
      await userEvent.type(passwordField, 'Password123');
      await userEvent.click(loginButton);
      expect(submitHandler).toHaveBeenCalledTimes(1);
    });
  });
});

从“React”导入React；
进口{
提供，
fireEvent，
清理,，
RenderResult，
}来自“@testing library/react”；
从“@testing library/user event”导入userEvent；
从“../components/Login”导入登录名；
描述（“”，（）=>{
让屏幕显示：RenderResult；
在每个之前（（）=>{
screen=render（）；
});
每次之后（清理）；
描述（'键入用户信息'，（）=>{
它（'显示用户名和密码'，异步（）=>{
expect（screen.queryByDisplayValue（'johnlukethethird'））.toBeNull（）；
等待userEvent.type(
screen.getByLabelText（/username/i），
“Johnlukethethird”，
);
wait userEvent.type（screen.getByLabelText（/password/i），'Password123'）；
expect（screen.queryByDisplayValue（'johnlukethethird'））.toBeInTheDocument（）；
expect（screen.queryByDisplayValue（'Password123'））.toBeInTheDocument（）；
});
});
描述（'单击登录按钮'，（）=>{
让登录按钮：HTMLElement；
让顺从者：开玩笑，嘲笑；
let form:HTMLElement；
在每个之前（（）=>{
loginButton=screen.getByText（/login/i）；
submitHandler=jest.fn（（e）=>e.preventDefault（））；
form=screen.getByTestId（/loginForm/i）；
form.onsubmit=提交者；
});
//这里有问题
它（'如果字段为空，则不调用提交处理程序'，（）=>{
期望（submitHandler）.not.tohavebeincall（）；
点击（登录按钮）；
期望（submitHandler）.not.tohavebeincall（）；
});
//问题区域结束
它（'如果字段非空，则调用提交处理程序'，异步（）=>{
期望（submitHandler）.not.tohavebeincall（）；
const usernameField=screen.getByTestId（'usernameText'）；
const passwordField=screen.getByTestId（'passwordText'）；
wait userEvent.type（usernameField，'johnlukethethird'）；
wait userEvent.type（passwordField，'Password123'）；
等待userEvent。单击（登录按钮）；
期望（提交者）。已被催收时间（1）；
});
});
});

测试“如果字段为空，则不调用提交处理程序”失败。我做错了什么？我在任何地方都找不到关于带有必需输入字段的测试表单的任何信息。我做错了吗？谢谢

---

另外，正如您所知：我在测试中执行了screen.debug（），两个输入的值都是“value=”“”

当

必需的
字段为空时阻止表单提交是客户端行为；这取决于Chrome、Firefox、Mobile Chrome、Mobile Safari等的实现。Jest只知道JavaScript，并不试图模仿本机客户端行为。例如，Chrome、Firefox和IE的旧版本尚未实现验证：非常感谢。“这是我一直在寻找的一个简洁明了的答案。”罗萨伦说，接下来的一个问题就是。那么，这是一个好主意吗？因为不是每个浏览器都使用它在我的handleSubmit中仍然包含空输入验证？检查用户名和密码状态是否为非空。