New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
activeElement might change during userEvent.type causing runtime errors #356
Comments
The active element not having a value property is probably going to be pretty common so we should probably improve the error message there. If you could give us more details on what your testing we may be able to help you more. |
I can try my best to describe the setup. I actually have not written any of the code myself, I'm just the lucky to do some maintenance task. We are actively working on a monorepo with ~40 people. We generate a form by some json values. The underlying libs used are The test looks similar to this (I striped some names/additional expects): it('does not submit', async () => {
render(<Form />);
await screen.findByText('Next');
await userEvent.type(screen.getByTestId('form-field'), 'my value');
await userEvent.clear(screen.getByTestId('form-field'));
fireEvent.blur(screen.getByTestId('form-field'));
userEvent.click(screen.getByText('Verification'));
await screen.findByText('Connection established');
userEvent.click(screen.getByText('Save'));
expect(screen.getAllByText('This field is required!').length).toBeGreaterThan(
0
);
expect(patch).not.toHaveBeenCalled();
}); The error appears in line fireEvent.change(screen.getByTestId('form-field'), {
target: { value: 'my value' },
}); or await userEvent.type(screen.getByTestId('form-field'), 'my value', {
allAtOnce: true,
}); I removed everything besides the faulty line, still the same result. A first I was suspecting the manual call of blur to be an issue. I assume this is done to trigger the validation of the form library.
true. |
The form is conditionally rendered, but at the time we type into the field the render output is stable. So the focus is not reset to the body by this. Logging |
I'm seeing this happen with portals where the portal component opens and has an active element but once you try to focus back to a text area to type the activeElement is the root of the portal. |
v12.0.14 addressed our issues, no longer seeing this happen! |
I am still encountering this issue due to portals. It gives me errors like:
|
@testing-library/user-event
version: >= 11.1.0@testing-library/dom
version: 5.10.1What you did:
Using
userEvent.type
. We have like > 1k tests which mostly usefireEvent
but slowly upgrading touserEvent
. All run fine, execept for one I encountered while updating our dependencies.As a tmp fix one can use
fireEvent.change
.What happened:
I narrowed it down to start with the release of https://github.com/testing-library/user-event/releases/tag/v11.1.0
Reproduction:
Problem description:
We currently have 90 occurrences for
await userEvent.type(
in our codebase, yet only a single one has this issue. I don't understand (yet) what could cause this.But I figured out the
activeElement
is always the body, so callingcurrentValue()
will be undefined, asbody
has no value prop.I will provide more details if I find more.
The text was updated successfully, but these errors were encountered: