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:

• React 18. set state in finally throws "act" warning, though test is passing testing-library/react-testing-library#1051
• https://github.com/testing-library/react-hooks-testing-library/blob/chore/migration-guide/MIGRATION_GUIDE.md

[tyler-dane]

After investigating, I am the problem. The warnings are indeed valid. They're pointing out that many effects are going on that make it hard to be certain the tests aren't being affected. These effects are mostly related to dragging, resizing, and drag-and-dropping events.

Instead of updating RTL's config, the solution is to isolate our effects so tests can be more isolated. That's gonna take a lot of refactoring that isn't a top priority now.

So, wrapping tests in act() is acceptable for the time being.

After effects are better isolated from presentation, we can gradually remove them.