在我的組件測試中使用 vitest 時出現語法錯誤

Question

我使用vitest和solid-testing-library創建了一個測試來測試我在solidjs 中設計的一個按鈕的工作情況。 這是我的基本測試：

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();
});

它在單擊后在呈現級別測試按鈕的操作。 name 屬性的默認值是Click me但是點擊后，這個屬性的值是Test this 。但是， vitest沒有識別這個測試，所以我這樣修改它，受到這個例子的啟發：

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!' }));

為了解決這個問題，看了這篇文章后，我修改了我的測試文件，如下所示：

describe('<Messenger />', () => {
  it('create an instance', () => {
  const { component } = render(() => <Messenger />);
  expect(await screen.findByRole('button', { name: 'Click me!' }));
  expect(component).toBeInTheDocument();
  });


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

但我仍然得到完全相同的錯誤。 謝謝

Answer 1

嘗試將async關鍵字添加到測試 function 定義中：

//                    here v
it('create an instance', async () => {
  const { component } = render(() => <Messenger />);
  expect(await screen.findByRole('button', { name: 'Click me!' }));
  expect(component).toBeInTheDocument();
});