dequelabs / dequelabs/cauldron

Pagination component tests are super noisy

Open
#518 2 comments 0 reactions 0 assignees View on GitHub
tech debt
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.