React waitforelement not working with async call - reactjs

Question

I'm currently trying a simple login form with an async call in React using TypeScript and classes.
My component looks like this:
import * as React from 'react';
import { LoginService } from './services/LoginService';
interface CredentialsState {
userName: string,
password: string,
isLoggedIn: boolean,
loginAttempted: boolean
}
interface CustomEvent {
target: HTMLInputElement
}
export class Login extends React.Component<{}, CredentialsState> {
state: CredentialsState = {
password: "",
userName: "",
isLoggedIn: false,
loginAttempted: false
};
private loginService: LoginService = new LoginService();
private async handleSubmit(event: React.SyntheticEvent) {
event.preventDefault();
const loginResponse = await this.loginService.login(
this.state.userName,
this.state.password
);
console.log('Login result ' + loginResponse);
this.setState({
loginAttempted: true,
isLoggedIn: loginResponse
});
}
private setPassword(event: CustomEvent) {
this.setState({ password: event.target.value });
}
private setUserName(event: CustomEvent) {
this.setState({ userName: event.target.value });
}
render() {
let loginLabel;
if (this.state.loginAttempted) {
if (this.state.isLoggedIn) {
loginLabel = <label>Login successful</label>
} else {
loginLabel = <label>Login failed</label>
}
}
return (
<div>
<form data-test="login-form" onSubmit={e => this.handleSubmit(e)}>
<input data-test="login-input" name="login" value={this.state.userName} onChange={e => this.setUserName(e)} /><br />
<input data-test="password-input" name="password" value={this.state.password} onChange={e => this.setPassword(e)} type="password" /><br />
<input data-test="submit-button" type="submit" value="Login" /><br />
</form>
{loginLabel}
</div>
)
}
}
It works just fine, but I also want to test it using #testing-library/react
My test looks like this:
import { fireEvent, waitForElement } from '#testing-library/react';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { act } from 'react-dom/test-utils';
import { Login } from './login';
import { LoginService } from './services/LoginService';
describe('Login component tests', () => {
let container: HTMLDivElement;
const loginServiceSpy = jest.spyOn(LoginService.prototype, 'login');
beforeEach(() => {
container = document.createElement('div');
document.body.appendChild(container);
act(() => {
ReactDOM.render(<Login />, container);
});
})
afterEach(() => {
document.body.removeChild(container as HTMLDivElement);
container.remove();
});
it('renders correctly status label', async () => {
loginServiceSpy.mockResolvedValueOnce(false);
const button = container.querySelectorAll('input')[2];
fireEvent.click(button);
const label = await waitForElement(() => {
container.querySelector('label');
}); // THIS query times out and test fails
expect(label).toBeInTheDocument();
});
});
How can I make this async test work? Without the async functionality, the container.querySelector('label') works.
Thanks!

Answer 1

Figured it out myself. I was misusing waitForElement.
The proper way to use it is:
const label = await waitForElement(() =>
container.querySelector('label')
)