dequelabs / dequelabs/cauldron
Pagination component tests are super noisy
- Dominant language
- TypeScript
- Stars
- 127
- Forks
- 31
- Avg merge
- 2d 12h
- Merged PRs (30d)
- 8
Description
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(...)` 🤷
Contributor guide
Research direction
Run `yarn --cwd=packages/react test` to reproduce the warnings, then read `__tests__/src/components/Pagination/index.js` in the React package. Review the linked React act guidance and trace the Tooltip updates identified in the output. Done means the Pagination tests still pass without these warnings. Confirm the issue remains relevant and someone can support the work, given the long inactivity.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react, typescript
- Domain
- frontend, testing
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- Half a day
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 54/100