[Solved] Mysterious errors with @testing-library/user-event@v14-beta.7

help
3

To conclude this thread here is how simple your client --full-app tests can look like with @testing-library/dom@8.11.2 and @testing-library/user-event@14.0.0-beta.7.

import {within, waitForElementToBeRemoved} from '@testing-library/dom';
import userEvent from '@testing-library/user-event';

const setupApp = () => {
	return {
		user: userEvent.setup(),
		...within(document.body),
	};
};

describe(__filename, () => {
	it('should allow to register a new user', async () => {
		const username = 'test';
		const password = 'test;
		const {getByRole, findByRole, getByLabelText, user} = setupApp();
		await user.click(await findByRole('button', {name: 'Sign in'}));
		await user.click(await findByRole('button', {name: 'Create account?'}));
		await findByRole('button', {name: 'Register'});
		await user.type(getByLabelText('Username'), username);
		await user.type(getByLabelText('Password'), password);
		await user.click(getByRole('button', {name: 'Register'}));
		await waitForElementToBeRemoved(() => {
			return getByRole('button', {name: 'Register'});
		});
		await user.click(
			await findByRole('button', {name: `Logged in as ${username}`}),
		);
	});
});

Of course you need to add some magic to reset the App and database after each test if you plan on writing more than one test.

If you really need to put this in an isomorphic test file, some adjustments are necessary:

import {within, waitForElementToBeRemoved} from '@testing-library/dom';

if (Meteor.isClient) {

const setupApp = async () => {
	const {default: userEvent} = await import('@testing-library/user-event');
	return {
		user: userEvent.setup(),
		...within(document.body),
	};
};

describe(__filename, () => {
	it('should allow to register a new user', async () => {
		...
		const {getByRole, findByRole, getByLabelText, user} = await setupApp();
		...
	});
});

}