Skip to content

fix: replace fireEvent with userEvent #5361

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 2 commits into from
Dec 9, 2022
Merged

fix: replace fireEvent with userEvent #5361

merged 2 commits into from
Dec 9, 2022

Conversation

mtojek
Copy link
Member

@mtojek mtojek commented Dec 9, 2022 •
edited
Loading

Possibly fix: #5309

I wasn't able to run WorkspacePage tests on M1 Macbook until I modified the test source.

Changes:

  1. Replace fireEvent with userEvent.
  2. Remove await (I'm not quite sure why it helps):
-  const status = await within(header).findByRole("status")
+  const status = within(header).getByRole("status")
Error trace 
yarn jest ./src/pages/WorkspacePage/ --selectProjects test
yarn run v1.22.19
$ /Users/mtojek/code/coder/site/node_modules/.bin/jest ./src/pages/WorkspacePage/ --selectProjects test
Running one project: test

 RUNS   test  src/pages/WorkspacePage/WorkspacePage.test.tsx
/Users/mtojek/code/coder/site/jest.setup.ts:66
        throw new Error(`Failing due to console.${logType} while running test!\n\n${util.format(format, ...args)}`);
              ^

Error: Failing due to console.error while running test!

Missing onError handler and/or unhandled exception/promise rejection for invocation 'startWorkspace'. Original error: 'Error: Failing due to console.error while running test!

Warning: An update to WorkspacePage 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 WorkspacePage (/Users/mtojek/code/coder/site/src/pages/WorkspacePage/WorkspacePage.tsx:15:14)
    at RequireAuth (/Users/mtojek/code/coder/site/src/components/RequireAuth/RequireAuth.tsx:14:8)
    at RenderedRoute (/Users/mtojek/code/coder/site/node_modules/react-router/lib/hooks.tsx:579:26)
    at Routes (/Users/mtojek/code/coder/site/node_modules/react-router/lib/components.tsx:374:3)
    at ThemeProvider (/Users/mtojek/code/coder/site/node_modules/@material-ui/styles/ThemeProvider/ThemeProvider.js:48:24)
    at I18nextProvider (/Users/mtojek/code/coder/site/node_modules/react-i18next/dist/commonjs/I18nextProvider.js:13:19)
    at XServiceProvider (/Users/mtojek/code/coder/site/src/xServices/StateContext.tsx:33:65)
    at Router (/Users/mtojek/code/coder/site/node_modules/react-router/lib/components.tsx:292:13)
    at MemoryRouter (/Users/mtojek/code/coder/site/node_modules/react-router/lib/components.tsx:125:3)
    at e (/Users/mtojek/code/coder/site/node_modules/react-helmet-async/src/Provider.js:36:22)'.  Stacktrace was 'Error: Failing due to console.error while running test!

Warning: An update to WorkspacePage 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 WorkspacePage (/Users/mtojek/code/coder/site/src/pages/WorkspacePage/WorkspacePage.tsx:15:14)
    at RequireAuth (/Users/mtojek/code/coder/site/src/components/RequireAuth/RequireAuth.tsx:14:8)
    at RenderedRoute (/Users/mtojek/code/coder/site/node_modules/react-router/lib/hooks.tsx:579:26)
    at Routes (/Users/mtojek/code/coder/site/node_modules/react-router/lib/components.tsx:374:3)
    at ThemeProvider (/Users/mtojek/code/coder/site/node_modules/@material-ui/styles/ThemeProvider/ThemeProvider.js:48:24)
    at I18nextProvider (/Users/mtojek/code/coder/site/node_modules/react-i18next/dist/commonjs/I18nextProvider.js:13:19)
    at XServiceProvider (/Users/mtojek/code/coder/site/src/xServices/StateContext.tsx:33:65)
    at Router (/Users/mtojek/code/coder/site/node_modules/react-router/lib/components.tsx:292:13)
    at MemoryRouter (/Users/mtojek/code/coder/site/node_modules/react-router/lib/components.tsx:125:3)
    at e (/Users/mtojek/code/coder/site/node_modules/react-helmet-async/src/Provider.js:36:22)
    at console.global.console.<computed> [as error] (/Users/mtojek/code/coder/site/jest.setup.ts:47:11)
    at printWarning (/Users/mtojek/code/coder/site/node_modules/react-dom/cjs/react-dom.development.js:86:30)
    at error (/Users/mtojek/code/coder/site/node_modules/react-dom/cjs/react-dom.development.js:60:7)
    at warnIfUpdatesNotWrappedWithActDEV (/Users/mtojek/code/coder/site/node_modules/react-dom/cjs/react-dom.development.js:27589:9)
    at scheduleUpdateOnFiber (/Users/mtojek/code/coder/site/node_modules/react-dom/cjs/react-dom.development.js:25508:5)
    at forceStoreRerender (/Users/mtojek/code/coder/site/node_modules/react-dom/cjs/react-dom.development.js:16977:5)
    at handleStoreChange (/Users/mtojek/code/coder/site/node_modules/react-dom/cjs/react-dom.development.js:16953:7)
    at Interpreter.update (/Users/mtojek/code/coder/site/node_modules/xstate/lib/interpreter.js:442:9)
    at /Users/mtojek/code/coder/site/node_modules/xstate/lib/interpreter.js:110:15
    at Scheduler.process (/Users/mtojek/code/coder/site/node_modules/xstate/lib/scheduler.js:69:7)
    at Scheduler.schedule (/Users/mtojek/code/coder/site/node_modules/xstate/lib/scheduler.js:48:10)
    at Interpreter.send (/Users/mtojek/code/coder/site/node_modules/xstate/lib/interpreter.js:104:23)
    at receive (/Users/mtojek/code/coder/site/node_modules/xstate/lib/interpreter.js:1213:13)
    at /Users/mtojek/code/coder/site/src/xServices/workspace/workspaceXService.ts:651:11
    at runNextTicks (node:internal/process/task_queues:61:5)
    at listOnTimeout (node:internal/timers:528:9)
    at processTimers (node:internal/timers:502:7)' Current error is 'Error: Failing due to console.error while running test!

Warning: An update to WorkspacePage 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 WorkspacePage (/Users/mtojek/code/coder/site/src/pages/WorkspacePage/WorkspacePage.tsx:15:14)
    at RequireAuth (/Users/mtojek/code/coder/site/src/components/RequireAuth/RequireAuth.tsx:14:8)
    at RenderedRoute (/Users/mtojek/code/coder/site/node_modules/react-router/lib/hooks.tsx:579:26)
    at Routes (/Users/mtojek/code/coder/site/node_modules/react-router/lib/components.tsx:374:3)
    at ThemeProvider (/Users/mtojek/code/coder/site/node_modules/@material-ui/styles/ThemeProvider/ThemeProvider.js:48:24)
    at I18nextProvider (/Users/mtojek/code/coder/site/node_modules/react-i18next/dist/commonjs/I18nextProvider.js:13:19)
    at XServiceProvider (/Users/mtojek/code/coder/site/src/xServices/StateContext.tsx:33:65)
    at Router (/Users/mtojek/code/coder/site/node_modules/react-router/lib/components.tsx:292:13)
    at MemoryRouter (/Users/mtojek/code/coder/site/node_modules/react-router/lib/components.tsx:125:3)
    at e (/Users/mtojek/code/coder/site/node_modules/react-helmet-async/src/Provider.js:36:22)'. Stacktrace was 'Error: Failing due to console.error while running test!

Warning: An update to WorkspacePage 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 WorkspacePage (/Users/mtojek/code/coder/site/src/pages/WorkspacePage/WorkspacePage.tsx:15:14)
    at RequireAuth (/Users/mtojek/code/coder/site/src/components/RequireAuth/RequireAuth.tsx:14:8)
    at RenderedRoute (/Users/mtojek/code/coder/site/node_modules/react-router/lib/hooks.tsx:579:26)
    at Routes (/Users/mtojek/code/coder/site/node_modules/react-router/lib/components.tsx:374:3)
    at ThemeProvider (/Users/mtojek/code/coder/site/node_modules/@material-ui/styles/ThemeProvider/ThemeProvider.js:48:24)
    at I18nextProvider (/Users/mtojek/code/coder/site/node_modules/react-i18next/dist/commonjs/I18nextProvider.js:13:19)
    at XServiceProvider (/Users/mtojek/code/coder/site/src/xServices/StateContext.tsx:33:65)
    at Router (/Users/mtojek/code/coder/site/node_modules/react-router/lib/components.tsx:292:13)
    at MemoryRouter (/Users/mtojek/code/coder/site/node_modules/react-router/lib/components.tsx:125:3)
    at e (/Users/mtojek/code/coder/site/node_modules/react-helmet-async/src/Provider.js:36:22)
    at console.global.console.<computed> [as error] (/Users/mtojek/code/coder/site/jest.setup.ts:47:11)
    at printWarning (/Users/mtojek/code/coder/site/node_modules/react-dom/cjs/react-dom.development.js:86:30)
    at error (/Users/mtojek/code/coder/site/node_modules/react-dom/cjs/react-dom.development.js:60:7)
    at warnIfUpdatesNotWrappedWithActDEV (/Users/mtojek/code/coder/site/node_modules/react-dom/cjs/react-dom.development.js:27589:9)
    at scheduleUpdateOnFiber (/Users/mtojek/code/coder/site/node_modules/react-dom/cjs/react-dom.development.js:25508:5)
    at forceStoreRerender (/Users/mtojek/code/coder/site/node_modules/react-dom/cjs/react-dom.development.js:16977:5)
    at handleStoreChange (/Users/mtojek/code/coder/site/node_modules/react-dom/cjs/react-dom.development.js:16953:7)
    at Interpreter.update (/Users/mtojek/code/coder/site/node_modules/xstate/lib/interpreter.js:442:9)
    at /Users/mtojek/code/coder/site/node_modules/xstate/lib/interpreter.js:110:15
    at Scheduler.process (/Users/mtojek/code/coder/site/node_modules/xstate/lib/scheduler.js:69:7)
    at Scheduler.schedule (/Users/mtojek/code/coder/site/node_modules/xstate/lib/scheduler.js:48:10)
    at Interpreter.send (/Users/mtojek/code/coder/site/node_modules/xstate/lib/interpreter.js:104:23)
    at /Users/mtojek/code/coder/site/node_modules/xstate/lib/interpreter.js:1122:17
    at runNextTicks (node:internal/process/task_queues:61:5)
    at listOnTimeout (node:internal/timers:528:9)
    at processTimers (node:internal/timers:502:7)'
    at console.global.console.<computed> [as error] (/Users/mtojek/code/coder/site/jest.setup.ts:47:11)
    at Object.reportUnhandledExceptionOnInvocation (/Users/mtojek/code/coder/site/node_modules/xstate/lib/utils.js:578:15)
    at /Users/mtojek/code/coder/site/node_modules/xstate/lib/interpreter.js:1126:17
    at runNextTicks (node:internal/process/task_queues:61:5)
    at listOnTimeout (node:internal/timers:528:9)
    at processTimers (node:internal/timers:502:7)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

@mtojek mtojek self-assigned this Dec 9, 2022
@mtojek mtojek marked this pull request as ready for review December 9, 2022 09:05
@mtojek mtojek requested a review from a team as a code owner December 9, 2022 09:05
@mtojek mtojek requested review from BrunoQuaresma and removed request for a team December 9, 2022 09:05
@mtojek mtojek merged commit cd04330 into coder:main Dec 9, 2022
@github-actions github-actions bot locked and limited conversation to collaborators Dec 9, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@kylecarbs kylecarbs kylecarbs approved these changes

@BrunoQuaresma BrunoQuaresma Awaiting requested review from BrunoQuaresma BrunoQuaresma was automatically assigned from coder/ts

Assignees

@mtojek mtojek

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

flaky: WorkspacePage exceeded timeout of 5000 ms for a test
2 participants
@mtojek @kylecarbs