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 !
CodePudding user response:
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();
});