🐛 ✅ tests not waiting for page to be ready

[astroash]

A number of tests are not waiting for component to be 'ready' before they test UI. They need to wait for componentDidMount request to be returned first.

This is partially a symptom of us not having a state management system #621

Linked to testing bugs outlined in #647

[astroash]

Example of this being fixed:

twine-visitor/src/visitors/pages/__tests__/Signup.test.js

Lines 22 to 60 in b0e0e64

	test('submit form w/ email & phone number payload renders QR code', async () => {
	expect.assertions(1);
	const visitor = {
	id: 1,
	name: 'Jill Valentine',
	gender: 'female',
	birthYear: 1988,
	email: 'jvizzle@umbrellacorp.com',
	phoneNumber: '+447777777777',
	postCode: 'SG33 6JD',
	emailConsent: true,
	smsConsent: false,
	qrCode: 'data:image/png;base64,329t4ji3nfp23nfergj42finoregn',
	};
	mock
	.onPost('/users/login/de-escalate')
	.reply(200, { data: null });
	mock.onPost('/users/register/visitors').reply(200, { result: { ...visitor } })
	.onGet('/community-businesses/me', { params: { fields: ['name', 'logoUrl', 'id'] } })
	.reply(200, { result: { name: 'cbName', logoUrl: 'cbURL', id: 1 } })
	.onGet('/users/me')
	.reply(200, { result: {} });
	mock
	.onGet('/genders')
	.reply(200, { result: [{ id: 1, name: 'male' }, { id: 2, name: 'female' }, { id: 3, name: 'prefer not to say' }] });
	const tools = renderWithRouter({ route: '/visitor/signup' })(main);
	// wait page to be ready by waiting for gender list to be populated
	await waitForElement(() => tools.getByText('female', { exact: false }));
	const [
	fullname,
	email,
	phoneNumber,

After defining the mocks, on L55 we wait for the gender option 'female' to be rendered to the page. This means that the componentDidMount request has been mocked and rendered to the page before we continue.