Pagination component tests are super noisy

[stephenmathieson]

Running yarn --cwd=packages/react test fills my console with tons of angry red text.

Angry red text

``` PASS __tests__/src/components/Pagination/index.js ● Console console.error node_modules/react-dom/cjs/react-dom.development.js:88 Warning: An update to Tooltip 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://fb.me/react-wrap-tests-with-act in Tooltip (created by TooltipTabstop) in TooltipTabstop (created by Pagination) in li (created by Pagination) in ul (created by Pagination) in div (created by Pagination) in Pagination (created by WrapperComponent) in WrapperComponent console.error node_modules/react-dom/cjs/react-dom.development.js:88 Warning: An update to Tooltip 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://fb.me/react-wrap-tests-with-act in Tooltip (created by TooltipTabstop) in TooltipTabstop (created by Pagination) in li (created by Pagination) in ul (created by Pagination) in div (created by Pagination) in Pagination (created by WrapperComponent) in WrapperComponent console.error node_modules/react-dom/cjs/react-dom.development.js:88 Warning: An update to Tooltip 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://fb.me/react-wrap-tests-with-act in Tooltip (created by IconButton) in IconButton (created by Pagination) in li (created by Pagination) in ul (created by Pagination) in div (created by Pagination) in Pagination (created by WrapperComponent) in WrapperComponent console.error node_modules/react-dom/cjs/react-dom.development.js:88 Warning: An update to Tooltip 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://fb.me/react-wrap-tests-with-act in Tooltip (created by IconButton) in IconButton (created by Pagination) in li (created by Pagination) in ul (created by Pagination) in div (created by Pagination) in Pagination (created by WrapperComponent) in WrapperComponent console.error node_modules/react-dom/cjs/react-dom.development.js:88 Warning: An update to Tooltip 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://fb.me/react-wrap-tests-with-act in Tooltip (created by IconButton) in IconButton (created by Pagination) in li (created by Pagination) in ul (created by Pagination) in div (created by Pagination) in Pagination (created by WrapperComponent) in WrapperComponent console.error node_modules/react-dom/cjs/react-dom.development.js:88 Warning: An update to Tooltip 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://fb.me/react-wrap-tests-with-act in Tooltip (created by IconButton) in IconButton (created by Pagination) in li (created by Pagination) in ul (created by Pagination) in div (created by Pagination) in Pagination (created by WrapperComponent) in WrapperComponent console.error node_modules/react-dom/cjs/react-dom.development.js:88 Warning: An update to Tooltip 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://fb.me/react-wrap-tests-with-act in Tooltip (created by TooltipTabstop) in TooltipTabstop (created by Pagination) in li (created by Pagination) in ul (created by Pagination) in div (created by Pagination) in Pagination (created by WrapperComponent) in WrapperComponent console.error node_modules/react-dom/cjs/react-dom.development.js:88 Warning: An update to Tooltip 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://fb.me/react-wrap-tests-with-act in Tooltip (created by TooltipTabstop) in TooltipTabstop (created by Pagination) in li (created by Pagination) in ul (created by Pagination) in div (created by Pagination) in Pagination (created by WrapperComponent) in WrapperComponent console.error node_modules/react-dom/cjs/react-dom.development.js:88 Warning: An update to Tooltip 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://fb.me/react-wrap-tests-with-act in Tooltip (created by TooltipTabstop) in TooltipTabstop (created by Pagination) in li (created by Pagination) in ul (created by Pagination) in div (created by Pagination) in Pagination (created by WrapperComponent) in WrapperComponent console.error node_modules/react-dom/cjs/react-dom.development.js:88 Warning: An update to Tooltip 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://fb.me/react-wrap-tests-with-act in Tooltip (created by TooltipTabstop) in TooltipTabstop (created by Pagination) in li (created by Pagination) in ul (created by Pagination) in div (created by Pagination) in Pagination (created by WrapperComponent) in WrapperComponent console.error node_modules/react-dom/cjs/react-dom.development.js:88 Warning: An update to Tooltip 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://fb.me/react-wrap-tests-with-act in Tooltip (created by IconButton) in IconButton (created by Pagination) in li (created by Pagination) in ul (created by Pagination) in div (created by Pagination) in Pagination (created by WrapperComponent) in WrapperComponent console.error node_modules/react-dom/cjs/react-dom.development.js:88 Warning: An update to Tooltip 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://fb.me/react-wrap-tests-with-act in Tooltip (created by IconButton) in IconButton (created by Pagination) in li (created by Pagination) in ul (created by Pagination) in div (created by Pagination) in Pagination (created by WrapperComponent) in WrapperComponent console.error node_modules/react-dom/cjs/react-dom.development.js:88 Warning: An update to Tooltip 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://fb.me/react-wrap-tests-with-act in Tooltip (created by IconButton) in IconButton (created by Pagination) in li (created by Pagination) in ul (created by Pagination) in div (created by Pagination) in Pagination (created by WrapperComponent) in WrapperComponent console.error node_modules/react-dom/cjs/react-dom.development.js:88 Warning: An update to Tooltip 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://fb.me/react-wrap-tests-with-act in Tooltip (created by IconButton) in IconButton (created by Pagination) in li (created by Pagination) in ul (created by Pagination) in div (created by Pagination) in Pagination (created by WrapperComponent) in WrapperComponent console.error node_modules/react-dom/cjs/react-dom.development.js:88 Warning: An update to Tooltip 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://fb.me/react-wrap-tests-with-act in Tooltip (created by IconButton) in IconButton (created by Pagination) in li (created by Pagination) in ul (created by Pagination) in div (created by Pagination) in Pagination (created by WrapperComponent) in WrapperComponent console.error node_modules/react-dom/cjs/react-dom.development.js:88 Warning: An update to Tooltip 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://fb.me/react-wrap-tests-with-act in Tooltip (created by IconButton) in IconButton (created by Pagination) in li (created by Pagination) in ul (created by Pagination) in div (created by Pagination) in Pagination (created by WrapperComponent) in WrapperComponent console.error node_modules/react-dom/cjs/react-dom.development.js:88 Warning: An update to Tooltip 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://fb.me/react-wrap-tests-with-act in Tooltip (created by IconButton) in IconButton (created by Pagination) in li (created by Pagination) in ul (created by Pagination) in div (created by Pagination) in Pagination (created by WrapperComponent) in WrapperComponent console.error node_modules/react-dom/cjs/react-dom.development.js:88 Warning: An update to Tooltip 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://fb.me/react-wrap-tests-with-act in Tooltip (created by IconButton) in IconButton (created by Pagination) in li (created by Pagination) in ul (created by Pagination) in div (created by Pagination) in Pagination (created by WrapperComponent) in WrapperComponent console.error node_modules/react-dom/cjs/react-dom.development.js:88 Warning: An update to Tooltip 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://fb.me/react-wrap-tests-with-act in Tooltip (created by IconButton) in IconButton (created by Pagination) in li (created by Pagination) in ul (created by Pagination) in div (created by Pagination) in Pagination (created by WrapperComponent) in WrapperComponent console.error node_modules/react-dom/cjs/react-dom.development.js:88 Warning: An update to Tooltip 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://fb.me/react-wrap-tests-with-act in Tooltip (created by IconButton) in IconButton (created by Pagination) in li (created by Pagination) in ul (created by Pagination) in div (created by Pagination) in Pagination (created by WrapperComponent) in WrapperComponent ```

It seems that we _should wrap state updates in act(...) 🤷

[scurker]

@stephenmathieson Unfortunately that doesn't solve the issue. 😞

Something about tooltip is still causing the error to appear even when the component is wrapped in act.

[lsprr]

Hi, I switched the Pagination test to React Testing Library from Enzyme. You can check the merged PR at #1404 . I've tested it, and it passed. It's no longer noisy. I'm still working on testing other components.