Vitest + act raising warnings

[Björn Böing]

Describe the bug

When running tests using act that interact with react-datepicker a warning is raised saying:

Warning: The current testing environment is not configured to support act(...)

This warning does not appear when not interacting with the datepicker.

To Reproduce
Steps to reproduce the behavior:

I tried to created a minimal reproducible example in this repo: https://github.com/BreakBB/act-test

So clone the repo, run npm ci and run the two tests in App.test.js:

1. "should allow act" which interacts with the datepicker and raises the warning
2. "should allow act without date picker" which renders the same component, but does not interact with the datepicker and does not raise the warning.

Expected behavior
I want both tests to continue passing, but without the warning message.

Dependencies

Node 20.11.1
react: 18.2.0
react-datepicker: 6.6.0
vite: 5.2.6
vitest: 1.4.0
@testing-library/jest-dom: 6.4.2
@testing-library/react: 14.2.2

[yuki0410]

@BreakBB
I think user-event@14 is an asynchronous method and does not need to be wrapped in act.
By modifying the repository you have currently provided as follows, the test will complete without warning.

describe('App', () => {
    it('should allow act', async () => {
        render(<App />);

        // await act(async () => {
            await userEvent.type(screen.getByRole('textbox'), '1');
        // });

        expect(screen.getByRole('textbox')).toHaveValue('03/26/20241');
    });

    it('should allow act without date picker', async () => {
        render(<App />);

        await act(async () => {
            await userEvent.click(screen.getByText(/count is 0/i));
        });

        expect(screen.getByText(/count is 1/i)).toBeDefined();
    });
});

testing-library/user-event#497

[Björn Böing]

Thanks for your response @yuki0410-dev

You are right, that the test will stay green without a warning, when removing the act.

However in a more complex setup, the act can be required (if I understand it correctly) and these tests were only created for reproduction purpose.

I am confused this warning is only raised when interacting with the datepicker. Not with a default <button /> and neither with a default <input /> (both setting a state).

[yuki0410]

@BreakBB Thanks for the reply.

Since there is a similar issue in the RTL issue, I suspect that it is not a react-datepicker-specific issue, but rather occurs when testing a component that is updating the state internally. (asynchronously?).
Probably does not occur for buttons and inputs because they do not have an internal state.

testing-library/user-event#1104
testing-library/react-testing-library#1061

It may also occur when combining act and userEvent.
(I can't find the source in English, sorry for the Japanese blog)
https://de-milestones.com/globalthis_is_react_act_environment-not_working/

[Björn Böing]

but rather occurs when testing a component that is updating the state internally.

I also think it is related to this.

The posts you linked (except for the Japanese one) are the sources I also found and which I tried to match on the behavior of react-datepicker.

In my actual test setup, I am facing the issue, that I can not wait for any UI element to update, because the warning is raised while typing to the date input.

I'll try to produce an example where the datepicker raises Warning: An update to DatePicker inside a test was not wrapped in act(...), to see if that is related to any specific prop I am using in my actual test.

[yuki0410]

I don't know if this will help, but I encountered a similar case in this Repository test, but I got around it by putting expect in waitFor.