AuthProvider can cause "Warning: Can't perform a React state update on an unmounted component." #5627
Description
seems to stem from: https://github.com/redwoodjs/redwood/blob/main/packages/auth/src/AuthProvider.tsx#L263-L270
not clear on if/how we might leverage componentWillUnmount to cancel the promise chain.
@redwoodjs/auth: FAIL src/__tests__/AuthProvider.test.tsx (10.582 s)
@redwoodjs/auth: ● Console
@redwoodjs/auth: console.error
@redwoodjs/auth: Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
@redwoodjs/auth: at AuthProvider (D:\a\redwood\redwood\packages\auth\src\AuthProvider.tsx:135:5)
@redwoodjs/auth:
@redwoodjs/auth: 261 | : await this.getCurrentUser()
@redwoodjs/auth: 262 |
@redwoodjs/auth: > 263 | this.setState({
@redwoodjs/auth: | ^
@redwoodjs/auth: 264 | ...this.state,
@redwoodjs/auth: 265 | userMetadata,
@redwoodjs/auth: 266 | currentUser,
@redwoodjs/auth:
@redwoodjs/auth: at printWarning (../../node_modules/react-dom/cjs/react-dom.development.js:67:30)
@redwoodjs/auth: at error (../../node_modules/react-dom/cjs/react-dom.development.js:43:5)
@redwoodjs/auth: at warnAboutUpdateOnUnmountedFiberInDEV (../../node_modules/react-dom/cjs/react-dom.development.js:23914:9)
@redwoodjs/auth: at scheduleUpdateOnFiber (../../node_modules/react-dom/cjs/react-dom.development.js:21840:5)
@redwoodjs/auth: at Object.enqueueSetState (../../node_modules/react-dom/cjs/react-dom.development.js:12467:5)
@redwoodjs/auth: at AuthProvider.setState (../../node_modules/react/cjs/react.development.js:365:16)
@redwoodjs/auth: at AuthProvider.reauthenticate (src/AuthProvider.tsx:263:14)
@redwoodjs/auth: at AuthProvider.logIn (src/AuthProvider.tsx:283:5)
@redwoodjs/auth: ● Authentication flow (logged out -> login -> logged in -> logout) works as expected
@redwoodjs/auth: Unable to find an element with the text: Log Out. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
@redwoodjs/auth: Ignored nodes: comments, <script />, <style />
@redwoodjs/auth: <body>
@redwoodjs/auth: <div>
@redwoodjs/auth: Loading...
@redwoodjs/auth: </div>
@redwoodjs/auth: </body>
@redwoodjs/auth:
@redwoodjs/auth: 157 |
@redwoodjs/auth: 158 | // Check that you're logged in!
@redwoodjs/auth: > 159 | await waitFor(() => screen.getByText('Log Out'))
@redwoodjs/auth: | ^
@redwoodjs/auth: 160 | expect(mockAuthClient.getUserMetadata).toBeCalledTimes(1)
@redwoodjs/auth: 161 | expect(
@redwoodjs/auth: 162 | screen.getByText(
@redwoodjs/auth:
@redwoodjs/auth: at waitForWrapper (../../node_modules/@testing-library/dom/dist/wait-for.js:187:27)
@redwoodjs/auth: at Object.<anonymous> (src/__tests__/AuthProvider.test.tsx:159:9)
@redwoodjs/auth: Test Suites: 1 failed, 2 passed, 3 total
@redwoodjs/auth: Tests: 1 failed, 25 passed, 26 total
@redwoodjs/auth: Snapshots: 0 total
@redwoodjs/auth: Time: 13.93 s
@redwoodjs/auth: Ran all test suites matching /src/i.
lerna ERR! yarn run test --colors --maxWorkers=4 exited 1 in '@redwoodjs/auth'
found due to it causing test failures in CI/CD due to unrelated changes: https://github.com/redwoodjs/redwood/runs/6546890312?check_suite_focus=true