'event was not wrapped in act' warning with React 18, react-datepicker and user.type #1231
Comments
|
Similar issue as #1216, but this happens in the middle of |
|
I'm experiencing this issue as well after upgrading from @testing-library/react@^12 to @testing-library/react@^14 and react@^17 to react@^18. Here's my stacktrace: It looks like the function that calls Could it be possible that their use of nested second args to Here's another repro (if that's helpful): LaunchPadLab/lp-components#613 |
|
I also tried this with user.type(input, '02/02/2023{Enter}')
await waitFor(() => {
expect(screen.queryByLabelText('Next Month')).not.toBeInTheDocument()
expect(input).toHaveValue('02/02/2023')
}) |
Good find! That's definitely some non-standard behavior. Hopefully one of the testing-library maintainers is able to figure out what to do. The error is definitely coming from within const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {
return;
});
describe('DateInput', () => {
beforeEach(() => {
user = userEvent.setup();
consoleError.mockClear();
});
afterEach(() => {
expect(consoleError).not.toBeCalled();
});I can then check for its usage in my test: await user.type(inputField, `${userFormattedDate}{Enter}`);
// Ignoring act warnings in this instance because of a testing-library bug:
// https://github.com/testing-library/react-testing-library/issues/1216
expect(consoleError).toBeCalled();
consoleError.mockClear();I want my tests to fail if a console error happens because they are usually indicative of behavior I need to correct. This is the only way around the bug while still giving me a clean console. |
|
Any update on this? I'm having a similar issue |
I think it has something to do with blurring the input in that Firstly, changing this.setState({ submitted: true }, () => this.blurInput());to this.setState({ submitted: true }, () => this.setState({ blurred: true }));Fixes the issue. So we're flushing Secondly, changing that same line to this.setState({ submitted: true });
this.blurInput();Also fixes the issue. So we're flushing I encountered this issue in the context of my own project, but it looks like it also applies to react-datepicker. Here we call |
|
I managed this hack to force the const originalSetState = React.Component.prototype.setState;
jest.spyOn(React.Component.prototype, 'setState').mockImplementation(function (
this: ThisType<React.Component>,
...args: Parameters<typeof originalSetState>
) {
const [update, callback] = args;
const wrappedCallback = callback && (() => act(() => callback()));
originalSetState.apply(this, [update, wrappedCallback]);
});however it unfortunately isn't sufficient for my use case. If it('minimal fc repro', async () => {
render(<MinimalRepro />);
const user = userEvent.setup();
await user.click(screen.getByText('Test'));
expect(1).toBe(1);
});
class MinimalReproParent extends React.Component<any> {
state = {
foo: 'bar',
};
doThing = () => this.setState({ foo: 'baz' }, () => this.props.onClick());
render() {
return <button onClick={this.doThing}>{'Test'}</button>;
}
}
function MinimalRepro() {
const [state, setState] = useState(false);
useEffect(() => {
if (state) {
setState(true);
}
}, [state]);
return <MinimalReproParent onClick={() => setState(true)} />;
}The set state in the |
Relevant code or config:
What you did:
use userEvent.type when targeting react-datepicker to enter a date. The weird thing is the "not wrapped in act" error only appears when a valid date is typed and the
{Enter}key is pressed. This is apparency causing some special condition to happen within the implementation of react-datepicker which userEvent isn't act wrapping appropriately.What happened:
Reproduction:
https://github.com/pzaczkiewicz-athenahealth/react-datepicker-user-event-test-failure
Problem description:
Not wrapped in act warnings are usually good indications that what you are testing is not what the user sees. Ignoring them may hide bigger issues in tests.
Suggested solution:
Unknown. I dug into testing-library source code and couldn't completely wrap my head around why asyncWrapper and eventWrapper flip-flopped IS_REACT_ACT_ENVIRONMENT.
The text was updated successfully, but these errors were encountered: