Skip to content

Commit 2de26cb

Browse files
samuelreichertsamuelreichert
committed
test(widgets): wrap rerender calls in act for proper state updates
1 parent e5fd7b3 commit 2de26cb

File tree

5 files changed

+99
-61
lines changed

5 files changed

+99
-61
lines changed

‎packages/pluggableWidgets/accordion-web/src/components/__tests__/Accordion.spec.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import "@testing-library/jest-dom";
22
import { createElement } from "react";
3-
import { render, RenderResult } from "@testing-library/react";
3+
import { act, render, RenderResult } from "@testing-library/react";
44
import userEvent, { UserEvent } from "@testing-library/user-event";
55
import { Accordion, AccordionProps } from "../Accordion";
66

@@ -251,7 +251,9 @@ describe("Accordion", () => {
251251
const newGroups = [...defaultProps.groups];
252252
newGroups[1].collapsed = false;
253253

254-
accordion.rerender(<Accordion {...defaultProps} singleExpandedGroup={false} groups={newGroups} />);
254+
act(() => {
255+
accordion.rerender(<Accordion {...defaultProps} singleExpandedGroup={false} groups={newGroups} />);
256+
});
255257

256258
expect(accordion.asFragment()).toMatchSnapshot();
257259
});

‎packages/pluggableWidgets/accordion-web/src/components/__tests__/AccordionGroup.spec.tsx‎

Lines changed: 68 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import "@testing-library/jest-dom";
2-
import { render, RenderResult } from "@testing-library/react";
2+
import { act, render, RenderResult } from "@testing-library/react";
33
import userEvent from "@testing-library/user-event";
44
import { createElement } from "react";
55
import { AccordionGroup, AccordionGroupProps, Target } from "../AccordionGroup";
@@ -75,14 +75,17 @@ describe("AccordionGroup", () => {
7575
expect(defaultAccordionGroupProps.generateHeaderIcon).toHaveBeenCalledTimes(1);
7676
expect(defaultAccordionGroupProps.generateHeaderIcon).toHaveBeenCalledWith(true);
7777

78-
accordionGroup.rerender(
79-
<AccordionGroup
80-
{...defaultAccordionGroupProps}
81-
collapsed={false}
82-
collapsible
83-
toggleCollapsed={jest.fn()}
84-
/>
85-
);
78+
act(() => {
79+
accordionGroup.rerender(
80+
<AccordionGroup
81+
{...defaultAccordionGroupProps}
82+
collapsed={false}
83+
collapsible
84+
toggleCollapsed={jest.fn()}
85+
/>
86+
);
87+
});
88+
8689
expect(defaultAccordionGroupProps.generateHeaderIcon).toHaveBeenCalledTimes(3);
8790
expect(defaultAccordionGroupProps.generateHeaderIcon).toHaveBeenCalledWith(false);
8891
expect(accordionGroup.asFragment()).toMatchSnapshot();
@@ -95,9 +98,12 @@ describe("AccordionGroup", () => {
9598
expect(defaultAccordionGroupProps.generateHeaderIcon).toHaveBeenCalledTimes(1);
9699
expect(defaultAccordionGroupProps.generateHeaderIcon).toHaveBeenCalledWith(false);
97100

98-
accordionGroup.rerender(
99-
<AccordionGroup {...defaultAccordionGroupProps} collapsed collapsible toggleCollapsed={jest.fn()} />
100-
);
101+
act(() => {
102+
accordionGroup.rerender(
103+
<AccordionGroup {...defaultAccordionGroupProps} collapsed collapsible toggleCollapsed={jest.fn()} />
104+
);
105+
});
106+
101107
expect(defaultAccordionGroupProps.generateHeaderIcon).toHaveBeenCalledTimes(3);
102108
expect(defaultAccordionGroupProps.generateHeaderIcon).toHaveBeenCalledWith(true);
103109
expect(accordionGroup.asFragment()).toMatchSnapshot();
@@ -109,9 +115,12 @@ describe("AccordionGroup", () => {
109115
});
110116
expect(defaultAccordionGroupProps.generateHeaderIcon).toHaveBeenCalledTimes(0);
111117

112-
accordionGroup.rerender(
113-
<AccordionGroup {...defaultAccordionGroupProps} visible collapsible toggleCollapsed={jest.fn()} />
114-
);
118+
act(() => {
119+
accordionGroup.rerender(
120+
<AccordionGroup {...defaultAccordionGroupProps} visible collapsible toggleCollapsed={jest.fn()} />
121+
);
122+
});
123+
115124
expect(defaultAccordionGroupProps.generateHeaderIcon).toHaveBeenCalledTimes(1);
116125
expect(defaultAccordionGroupProps.generateHeaderIcon).toHaveBeenCalledWith(true);
117126
expect(accordionGroup.asFragment()).toMatchSnapshot();
@@ -124,9 +133,12 @@ describe("AccordionGroup", () => {
124133
});
125134
expect(defaultAccordionGroupProps.generateHeaderIcon).toHaveBeenCalledTimes(0);
126135

127-
accordionGroup.rerender(
128-
<AccordionGroup {...defaultAccordionGroupProps} visible collapsible toggleCollapsed={jest.fn()} />
129-
);
136+
act(() => {
137+
accordionGroup.rerender(
138+
<AccordionGroup {...defaultAccordionGroupProps} visible collapsible toggleCollapsed={jest.fn()} />
139+
);
140+
});
141+
130142
expect(defaultAccordionGroupProps.generateHeaderIcon).toHaveBeenCalledTimes(2);
131143
expect(defaultAccordionGroupProps.generateHeaderIcon).toHaveBeenCalledWith(false);
132144
expect(accordionGroup.asFragment()).toMatchSnapshot();
@@ -240,13 +252,16 @@ describe("AccordionGroup", () => {
240252
const accordionGroup = renderCollapsibleAccordionGroup({
241253
onToggleCompletion: onToggleCompletionMock
242254
});
243-
accordionGroup.rerender(
244-
<AccordionGroup
245-
{...defaultAccordionGroupProps}
246-
collapsed={false}
247-
onToggleCompletion={onToggleCompletionMock}
248-
/>
249-
);
255+
256+
act(() => {
257+
accordionGroup.rerender(
258+
<AccordionGroup
259+
{...defaultAccordionGroupProps}
260+
collapsed={false}
261+
onToggleCompletion={onToggleCompletionMock}
262+
/>
263+
);
264+
});
250265

251266
expect(onToggleCompletionMock).toHaveBeenCalledTimes(1);
252267
expect(onToggleCompletionMock).toHaveBeenCalledWith(false);
@@ -294,7 +309,10 @@ describe("AccordionGroup", () => {
294309
visible: false
295310
});
296311

297-
accordionGroup.rerender(<AccordionGroup {...defaultAccordionGroupProps} visible collapsed={false} />);
312+
act(() => {
313+
accordionGroup.rerender(<AccordionGroup {...defaultAccordionGroupProps} visible collapsed={false} />);
314+
});
315+
298316
expect(defaultAccordionGroupProps.generateHeaderIcon).toHaveBeenCalledTimes(0);
299317
expect(accordionGroup.asFragment()).toMatchSnapshot();
300318
});
@@ -344,26 +362,32 @@ describe("AccordionGroup", () => {
344362

345363
expect(accordionGroup.queryByText("Widgets")).not.toBeInTheDocument();
346364

347-
accordionGroup.rerender(
348-
<AccordionGroup
349-
{...defaultAccordionGroupProps}
350-
collapsible
351-
content={<div>Widgets</div>}
352-
loadContent="whenExpanded"
353-
collapsed={false}
354-
/>
355-
);
365+
act(() => {
366+
accordionGroup.rerender(
367+
<AccordionGroup
368+
{...defaultAccordionGroupProps}
369+
collapsible
370+
content={<div>Widgets</div>}
371+
loadContent="whenExpanded"
372+
collapsed={false}
373+
/>
374+
);
375+
});
376+
356377
expect(accordionGroup.queryByText("Widgets")).toBeInTheDocument();
357378

358-
accordionGroup.rerender(
359-
<AccordionGroup
360-
{...defaultAccordionGroupProps}
361-
collapsible
362-
content={<div>Widgets</div>}
363-
loadContent="whenExpanded"
364-
collapsed
365-
/>
366-
);
379+
act(() => {
380+
accordionGroup.rerender(
381+
<AccordionGroup
382+
{...defaultAccordionGroupProps}
383+
collapsible
384+
content={<div>Widgets</div>}
385+
loadContent="whenExpanded"
386+
collapsed
387+
/>
388+
);
389+
});
390+
367391
expect(accordionGroup.queryByText("Widgets")).toBeInTheDocument();
368392
});
369393
});

‎packages/pluggableWidgets/accordion-web/src/utils/__tests__/iconGenerator.spec.ts‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { renderHook, RenderHookResult } from "@testing-library/react";
1+
import { act, renderHook, RenderHookResult } from "@testing-library/react";
22
import { AccordionContainerProps } from "../../../typings/AccordionProps";
33
import { IconProps } from "../../components/Icon";
44
import { useIconGenerator } from "../iconGenerator";
@@ -38,14 +38,18 @@ describe("useIconGenerator", () => {
3838
const renderedHook = initUseIconGenerator();
3939
const firstFunction = renderedHook.result.current;
4040

41-
renderedHook.rerender(defaultHookProps);
41+
act(() => {
42+
renderedHook.rerender(defaultHookProps);
43+
});
4244
expect(renderedHook.result.current).toBe(firstFunction);
4345
});
4446
it("returns a new function when the arguments have changed", () => {
4547
const renderedHook = initUseIconGenerator();
4648
const firstFunction = renderedHook.result.current;
4749

48-
renderedHook.rerender({ ...defaultHookProps, animateIcon: false });
50+
act(() => {
51+
renderedHook.rerender({ ...defaultHookProps, animateIcon: false });
52+
});
4953
expect(renderedHook.result.current).not.toBe(firstFunction);
5054
});
5155

‎packages/pluggableWidgets/color-picker-web/src/components/__tests__/Button.spec.tsx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import "@testing-library/jest-dom";
2-
import { render, RenderResult } from "@testing-library/react";
2+
import { act, render, RenderResult } from "@testing-library/react";
33
import { createElement } from "react";
44
import { Button, ButtonProps } from "../Button";
55

@@ -30,13 +30,19 @@ describe("Button", () => {
3030
const button = getByRole("button");
3131
expect(button).toHaveClass("btn");
3232

33-
rerender(<Button {...buttonProps} disabled />);
33+
act(() => {
34+
rerender(<Button {...buttonProps} disabled />);
35+
});
3436
expect(button).toHaveClass("disabled");
3537

36-
rerender(<Button {...buttonProps} mode="input" />);
38+
act(() => {
39+
rerender(<Button {...buttonProps} mode="input" />);
40+
});
3741
expect(button).toHaveClass("widget-color-picker-input");
3842

39-
rerender(<Button {...buttonProps} mode="inline" />);
43+
act(() => {
44+
rerender(<Button {...buttonProps} mode="inline" />);
45+
});
4046
expect(button).toHaveClass("hidden");
4147
});
4248
});

‎packages/pluggableWidgets/color-picker-web/src/components/__tests__/ColorPicker.spec.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import "@testing-library/jest-dom";
2-
import { render, RenderResult } from "@testing-library/react";
2+
import { act, render, RenderResult } from "@testing-library/react";
33
import userEvent, { UserEvent } from "@testing-library/user-event";
44
import { createElement } from "react";
55
import { ColorPicker, ColorPickerProps } from "../ColorPicker";
@@ -42,13 +42,15 @@ describe("ColorPicker", () => {
4242
it("renders picker with pre-defined default colors", () => {
4343
const colorPickerComponent = renderColorPicker();
4444

45-
colorPickerComponent.rerender(
46-
<ColorPicker
47-
{...colorPickerProps}
48-
mode="inline"
49-
defaultColors={[{ color: "#2CCCE4" }, { color: "#555555" }]}
50-
/>
51-
);
45+
act(() => {
46+
colorPickerComponent.rerender(
47+
<ColorPicker
48+
{...colorPickerProps}
49+
mode="inline"
50+
defaultColors={[{ color: "#2CCCE4" }, { color: "#555555" }]}
51+
/>
52+
);
53+
});
5254

5355
expect(colorPickerComponent.asFragment()).toMatchSnapshot();
5456
});

0 commit comments

Comments
 (0)