Closed
Description
Prerequisites
- Using an up-to-date main branch
Expected Behavior
React Testing Library tests run without any warnings
Current Behavior
act() warnings appear during tests, even when tests pass.
Steps to Reproduce
-
Setup your dev environment. Follow the Setup Guide up to the Start in Dev Mode section
-
Run a single React Testing Library:
# from `/compass` root
yarn jest eventform.test -t 'Event Form closes when clicking outside'
# or yarn test:web to run all the web-related tests- Notice the
act()warnings
console.error
Warning: An update to SomedaySection inside a test was not wrapped in act(...).
When testing, code that causes React state updates should be wrapped into act(...):
act(() => {
/* fire events that update state */
});
/* assert on the output */
This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
at dateCalcs (/Users/ty/src/switchback/compass/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedaySection.tsx:27:3)
at div
at displayName (/Users/ty/src/switchback/compass/node_modules/styled-components/src/models/StyledComponent.js:247:14)
at prefs (/Users/ty/src/switchback/compass/packages/web/src/views/Calendar/components/LeftSidebar/LeftSidebar.tsx:21:11)
at div
at displayName (/Users/ty/src/switchback/compass/node_modules/styled-components/src/models/StyledComponent.js:247:14)
at CalendarView (/Users/ty/src/switchback/compass/packages/web/src/views/Calendar/Calendar.tsx:40:31)
at Provider (/Users/ty/src/switchback/compass/node_modules/react-redux/lib/components/Provider.js:19:3)
at basenameProp (/Users/ty/src/switchback/compass/node_modules/react-router/lib/components.tsx:311:13)
at basename (/Users/ty/src/switchback/compass/node_modules/react-router-dom/index.tsx:292:3)
at GoogleOAuthProvider (/Users/ty/src/switchback/compass/node_modules/@react-oauth/google/dist/index.js:42:32)
at children (/Users/ty/src/switchback/compass/node_modules/react-dnd/src/core/DndProvider.tsx:28:25)
at children (/Users/ty/src/switchback/compass/packages/web/src/__tests__/__mocks__/mock.render.tsx:29:30)
54 | const onSectionClick = () => {
55 | if (isDrafting) {
> 56 | dispatch(draftSlice.actions.discard());
| ^
57 | return;
58 | }
59 | };
Possible Solution (Not obligatory)
- React Testing Library dependency updates
Context
Avoid the workaround of wrapping parts of the test in act(). This makes the test much harder to read, maintain, and debug. It's also a worse developer experience than the verbose logs.
I have a feeling the solution will be related to updating RTL dependencies or configs. I'd like to avoid any scenario where Compass's RTL individual tests have to be modified.
Here are some relevant links about this issue: