使用Vitest测试SolidJS组件时遭遇await语法错误求助

我用vitest和solid-testing-library为SolidJS的Messenger组件编写测试，要验证按钮点击后文本从'Click me!'变为'Test this!'。初始测试未被vitest识别，参考示例修改后出现「Unexpected reserved word 'await'」语法错误，多次调整仍无法解决。相关代码和错误信息如下：

初始测试代码 #

import { screen, render, fireEvent } from 'solid-testing-library';
import { Messenger } from '../Messenger';

test('changes text on click', async () => {
  await render(() => <Messenger />);
  const component = await screen.findByRole('button', { name: 'Click me!' });
  expect(component).toBeInTheDocument();
  fireEvent.click(component);
  expect(await screen.findByRole('button', { name: 'Test this!' })).toBeInTheDocument();
});

修改后的测试代码 #

import { screen, render, fireEvent } from 'solid-testing-library';
import { describe, expect,it ,  test } from 'vitest';
import { Messenger } from '../components/header/Messenger';

describe('<Messenger />', () => {
  test('This changes text on click', () => {
  const { component } = render(() => <Messenger />);
  expect(await screen.findByRole('button', { name: 'Click me!' }));
  expect(component).toBeInTheDocument();
  fireEvent.click(component);
  expect(await screen.findByRole('button', { name: 'Test this!' })).toBeInTheDocument();
  });

})

错误信息 #

SyntaxError: C:\Users\user\Documents\AAprojects\Whelpsgroups1\w3\front\src\__tests__\test.test.jsx: Unexpected reserved word 'await'. (9:9)
    
       7 |   test('This changes text on click', () => {
       8 |   const { component } = render(() => <Messenger />);
    >  9 |   expect(await screen.findByRole('button', { name: 'Click me!' }));

错误原因 #

核心问题是测试回调函数未声明为async，但内部使用了await关键字——await只能在async函数中使用，普通函数里直接调用会触发语法错误。此外原代码还有两处小问题：

• solid-testing-library的render是同步方法，不需要加await
• 从render返回值中解构component是错误用法，应通过screen对象查询元素
• 第一个expect语句缺少断言方法（如.toBeInTheDocument()），无法生效

修复后的完整测试代码 #

import { screen, render, fireEvent } from 'solid-testing-library';
import { describe, expect, test } from 'vitest';
import { Messenger } from '../components/header/Messenger';

describe('<Messenger />', () => {
  // 关键：将测试回调声明为async函数
  test('changes text on button click', async () => {
    // render是同步方法，无需await
    render(() => <Messenger />);
    
    // 查询初始状态的按钮并断言存在
    const button = await screen.findByRole('button', { name: 'Click me!' });
    expect(button).toBeInTheDocument();
    
    // 触发按钮点击事件
    fireEvent.click(button);
    
    // 验证按钮文本更新
    const updatedButton = await screen.findByRole('button', { name: 'Test this!' });
    expect(updatedButton).toBeInTheDocument();
  });
});

补充说明 #

1. async函数声明：必须把test的回调函数写成async () => {}，才能合法使用await
2. render方法使用：solid-testing-library的render是同步执行的，直接调用即可，无需加await
3. 异步元素查询：使用screen.findByRole这类异步查询方法时，必须用await等待元素渲染完成
4. 完整断言：每个expect都要搭配对应的断言方法，否则测试无法验证预期结果

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