Configure React Testing Library to Avoid Warning

[tyler-dane]

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

1. Setup your dev environment. Follow the Setup Guide up to the Start in Dev Mode section

2. 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

3. 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:

• https://github.com/testing-library/react-testing-library/issues/1051
• https://github.com/testing-library/react-hooks-testing-library/blob/chore/migration-guide/MIGRATION_GUIDE.md