Syntax error when using vitest on my component test

July 28, 2022

I created a test to test the working of one of my buttons designed in solidjs using vitest and solid-testing-library. Here is my basic test:

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

it tests the operation of a button at the rendering level after the click. The default value of the name attribute is Click me! but after a click, this attribute takes the value Test this! .However, vitest didn’t recognize this test, so I modified it like this, inspired by this example:

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

})

The problem is that when I run I get the error:

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

To solve this problem, after looking on this article, I modified my test file like this:

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

But I still get the exact same error. Thanks !

>Solution :

Try adding async keyword to the test function definition:

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