登录表单自动化测试报错：Cannot read properties of undefined (reading 'value')

问题场景 #

我正在为网站登录组件编写自动化测试用例，需覆盖以下场景：

• 空输入框显示错误提示
• 邮箱/密码错误显示错误提示
• 信息正确则跳转页面

测试脚本 #

test('Inputs should be initially empty', async() => {
    render(<App/>);
    const emailInputElement = await screen.findByRole('textbox');
    const passwordlInputElement = await screen.findByLabelText("Password");
    expect(emailInputElement.value).toBe('');
    expect(passwordlInputElement.value).toBe('');
});
test('should be able to type an email', async() => {
    render(<App/>);
    const emailInputElement = await screen.findByRole('textbox', {name:/email/i});
    fireEvent.change(emailInputElement, {target: {value:'sanjay-alvyl'}});
    expect(emailInputElement.value).toBe('sanjay-alvyl');
})
test('should be able to type a password', async() => {
    render(<App/>);
    const passwordInputElement = await screen.findByLabelText('Password');
    fireEvent.change(passwordInputElement, {target: {value:'Test123'}});
    expect(passwordInputElement.value).toBe('Test123');
})
test('should show an error message on invalid email', async() => {
    render(<App/>);
    const emailInputElement = await screen.findByRole('textbox', {name:/email/i});
    fireEvent.change(emailInputElement, {target: {value:'nhhvgfjf'}});
    const submitBtnElement = await screen.findByRole('button',{name:/sign in/i});
    fireEvent.click(submitBtnElement);
    const emailErrorElement=screen.findByText(/Please fill in this field/i);
    console.log(emailErrorElement)
    expect(emailErrorElement).toBeInTheDocument();
});

错误信息 #

✓ Inputs should be initially empty (17 ms)
✓ should be able to type an email (17 ms)
✓ should be able to type a password (5 ms)
✕ should show an error message on invalid email (66 ms)
● Landing Page › should show an error message on invalid email
TypeError: Cannot read properties of undefined (reading 'value')
  24 |     event.preventDefault();
  25 |
> 26 |     let email = event.target.email.value;
     |                                    ^
  27 |     let password = event.target.password.value;
  28 |     authContext.signInWithEmail({ email, password }, (response) => {
  29 |       if (typeof response === "string") {

问题原因及解决方案 #

原因 #

1. 直接点击提交按钮时，模拟的click事件对象的target是按钮元素而非表单元素，导致无法通过event.target.email获取输入框值，抛出undefined错误
2. screen.findByText是异步查询方法，未添加await会导致断言时元素尚未渲染完成

修正步骤 #

1. 定位登录表单元素，触发表单的submit事件而非按钮的click事件，确保事件对象的target为表单，能正确获取输入框
2. 对screen.findByText添加await，等待错误提示元素渲染完成

修改后的测试用例 #

test('should show an error message on invalid email', async() => {
    render(<App/>);
    // 定位表单元素（可根据实际DOM结构调整定位方式）
    const loginForm = await screen.findByRole('form');
    const emailInputElement = await screen.findByRole('textbox', {name:/email/i});
    fireEvent.change(emailInputElement, {target: {value:'nhhvgfjf'}});
    
    // 触发表单submit事件
    fireEvent.submit(loginForm);
    
    // 异步查询错误提示，添加await
    const emailErrorElement = await screen.findByText(/Please fill in this field/i);
    expect(emailErrorElement).toBeInTheDocument();
});

如果无法通过role='form'定位表单，也可以通过输入框的父元素查找：

const loginForm = emailInputElement.closest('form');

内容的提问来源于stack exchange，提问作者Neelima