Skip to content

Commit a275842

Browse files
HotellHotell
authored
test: replace react-dom apis with ReactTestingLibary in all v8 tests to make them work with react 18 (#34347)
1 parent 94096dd commit a275842

41 files changed

Lines changed: 905 additions & 1074 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎change/@fluentui-react-62a81c04-c0d4-4d20-8748-5c1eb9cf408d.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "none",
3+
"comment": "test: replace react-dom api with RTL to make tests compatible with react 18",
4+
"packageName": "@fluentui/react",
5+
"email": "martinhochel@microsoft.com",
6+
"dependentChangeType": "none"
7+
}

‎packages/react-experiments/src/components/FloatingSuggestions/Suggestions/SuggestionsControl.test.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
2-
import * as ReactDOM from 'react-dom';
32

43
import { SuggestionsControl } from './SuggestionsControl';
4+
import { render } from '@testing-library/react';
55

66
const doNothing = () => {
77
return;
@@ -12,8 +12,7 @@ const renderNothing = () => <></>;
1212
describe('Pickers', () => {
1313
describe('SuggestionsControl', () => {
1414
it('renders header/footer items with the provided className', () => {
15-
const root = document.createElement('div');
16-
ReactDOM.render(
15+
const { container } = render(
1716
<SuggestionsControl
1817
headerItemsProps={[
1918
{
@@ -35,13 +34,10 @@ describe('Pickers', () => {
3534
onSuggestionClick={doNothing}
3635
onRenderSuggestion={renderNothing}
3736
/>,
38-
root,
3937
);
4038

41-
expect(root.querySelector('.header-item-wrapper .header-item-inner')).not.toBe(null);
42-
expect(root.querySelector('.footer-item-wrapper .footer-item-inner')).not.toBe(null);
43-
44-
ReactDOM.unmountComponentAtNode(root);
39+
expect(container.querySelector('.header-item-wrapper .header-item-inner')).not.toBe(null);
40+
expect(container.querySelector('.footer-item-wrapper .footer-item-inner')).not.toBe(null);
4541
});
4642
});
4743
});

‎packages/react-experiments/src/components/FloatingSuggestionsComposite/FloatingSuggestionsComposite.test.tsx‎

Lines changed: 51 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import * as React from 'react';
22
import { create } from 'react-test-renderer';
33
import { BaseFloatingSuggestions } from './FloatingSuggestions';
4-
import * as ReactDOM from 'react-dom';
5-
import * as ReactTestUtils from 'react-dom/test-utils';
4+
import { render, fireEvent } from '@testing-library/react';
65
import type { IFloatingSuggestionItem } from './FloatingSuggestionsItem/FloatingSuggestionsItem.types';
76
import type { IBaseFloatingSuggestionsProps } from './FloatingSuggestions.types';
87

@@ -11,7 +10,6 @@ export interface ISimple {
1110
name: string;
1211
}
1312

14-
let container: HTMLDivElement | null;
1513
let _suggestions: IFloatingSuggestionItem<ISimple>[];
1614

1715
const items: ISimple[] = [
@@ -25,8 +23,6 @@ const _onSuggestionRemoved = jest.fn();
2523
const picker = React.createRef<HTMLDivElement>();
2624

2725
beforeEach(() => {
28-
container = document.createElement('div');
29-
document.body.appendChild(container);
3026
_suggestions = [
3127
{
3228
key: '1',
@@ -50,11 +46,6 @@ beforeEach(() => {
5046
});
5147

5248
afterEach(() => {
53-
if (container) {
54-
document.body.removeChild(container);
55-
ReactDOM.unmountComponentAtNode(container);
56-
container = null;
57-
}
5849
jest.clearAllMocks();
5950
});
6051

@@ -91,32 +82,26 @@ describe('FloatingSuggestions', () => {
9182
});
9283

9384
it('renders FloatingSuggestions with suggestions visible true', () => {
94-
// Our functional tests need to run against actual DOM for callouts to work,
95-
// since callout mount a new react root with ReactDOM.
96-
//
97-
// see https://github.com/facebook/react/pull/12895
98-
ReactTestUtils.act(() => {
99-
ReactDOM.render(
100-
<BaseFloatingSuggestions
101-
suggestions={_suggestions}
102-
isSuggestionsVisible={true}
103-
componentRef={picker}
104-
targetElement={null}
105-
suggestionsHeaderText={'People Test Suggestions'}
106-
noResultsFoundText={'No Test Suggestions'}
107-
onFloatingSuggestionsDismiss={undefined}
108-
showSuggestionRemoveButton={true}
109-
onSuggestionSelected={_onSuggestionSelected}
110-
onRemoveSuggestion={_onSuggestionRemoved}
111-
/>,
112-
container,
113-
) as unknown as IBaseFloatingSuggestionsProps<ISimple>;
114-
});
115-
116-
const floatingSuggestions = document.querySelector('.ms-FloatingSuggestions') as HTMLInputElement;
85+
// Using React Testing Library instead of ReactDOM
86+
render(
87+
<BaseFloatingSuggestions
88+
suggestions={_suggestions}
89+
isSuggestionsVisible={true}
90+
componentRef={picker}
91+
targetElement={null}
92+
suggestionsHeaderText={'People Test Suggestions'}
93+
noResultsFoundText={'No Test Suggestions'}
94+
onFloatingSuggestionsDismiss={undefined}
95+
showSuggestionRemoveButton={true}
96+
onSuggestionSelected={_onSuggestionSelected}
97+
onRemoveSuggestion={_onSuggestionRemoved}
98+
/>,
99+
);
100+
101+
const floatingSuggestions = document.querySelector('.ms-FloatingSuggestions') as HTMLElement;
117102
expect(floatingSuggestions).toBeTruthy();
118103

119-
const callout = container?.getElementsByClassName('.ms-FloatingSuggestions-callout');
104+
const callout = document.querySelector('.ms-FloatingSuggestions-callout');
120105
expect(callout).toBeTruthy();
121106

122107
const suggestionsList = document.querySelectorAll('div[id^=FloatingSuggestionsItemId]');
@@ -130,58 +115,53 @@ describe('FloatingSuggestions', () => {
130115
});
131116

132117
it('renders FloatingSuggestions and updates when suggestions are removed', () => {
133-
ReactTestUtils.act(() => {
134-
ReactDOM.render(
135-
<BaseFloatingSuggestions
136-
suggestions={_suggestions}
137-
isSuggestionsVisible={true}
138-
componentRef={picker}
139-
targetElement={null}
140-
suggestionsHeaderText={'People Test Suggestions'}
141-
noResultsFoundText={'No Test Suggestions'}
142-
onFloatingSuggestionsDismiss={undefined}
143-
showSuggestionRemoveButton={true}
144-
onSuggestionSelected={_onSuggestionSelected}
145-
onRemoveSuggestion={_onSuggestionRemoved}
146-
/>,
147-
container,
148-
) as unknown as IBaseFloatingSuggestionsProps<ISimple>;
149-
});
118+
render(
119+
<BaseFloatingSuggestions
120+
suggestions={_suggestions}
121+
isSuggestionsVisible={true}
122+
componentRef={picker}
123+
targetElement={null}
124+
suggestionsHeaderText={'People Test Suggestions'}
125+
noResultsFoundText={'No Test Suggestions'}
126+
onFloatingSuggestionsDismiss={undefined}
127+
showSuggestionRemoveButton={true}
128+
onSuggestionSelected={_onSuggestionSelected}
129+
onRemoveSuggestion={_onSuggestionRemoved}
130+
/>,
131+
);
150132

151133
const suggestionListButtons = document.querySelectorAll('.ms-FloatingSuggestionsItem-itemButton');
152134
expect(suggestionListButtons.length).toEqual(2);
153-
ReactTestUtils.Simulate.click(suggestionListButtons[0]);
154-
ReactTestUtils.Simulate.click(suggestionListButtons[1]);
135+
fireEvent.click(suggestionListButtons[0]);
136+
fireEvent.click(suggestionListButtons[1]);
155137
expect(_onSuggestionSelected).toHaveBeenCalledTimes(2);
156138

157139
const closeButtons = document.querySelectorAll('.ms-FloatingSuggestionsItem-closeButton');
158140
// There should be 2 close buttons for each suggestion.
159141
expect(closeButtons.length).toEqual(2);
160142

161-
ReactTestUtils.Simulate.click(closeButtons[0]);
143+
fireEvent.click(closeButtons[0]);
162144
// On closing, suggestion removed should be called once.
163145
expect(_onSuggestionRemoved).toHaveBeenCalledTimes(1);
164146
});
165147

166148
it('shows no suggestions when no suggestions are provided', () => {
167149
_suggestions = [];
168-
ReactTestUtils.act(() => {
169-
ReactDOM.render(
170-
<BaseFloatingSuggestions
171-
suggestions={_suggestions}
172-
isSuggestionsVisible={true}
173-
componentRef={picker}
174-
targetElement={null}
175-
suggestionsHeaderText={'People Test Suggestions'}
176-
noResultsFoundText={'No Test Suggestions'}
177-
onFloatingSuggestionsDismiss={undefined}
178-
showSuggestionRemoveButton={true}
179-
onSuggestionSelected={_onSuggestionSelected}
180-
onRemoveSuggestion={_onSuggestionRemoved}
181-
/>,
182-
container,
183-
) as unknown as IBaseFloatingSuggestionsProps<ISimple>;
184-
});
150+
render(
151+
<BaseFloatingSuggestions
152+
suggestions={_suggestions}
153+
isSuggestionsVisible={true}
154+
componentRef={picker}
155+
targetElement={null}
156+
suggestionsHeaderText={'People Test Suggestions'}
157+
noResultsFoundText={'No Test Suggestions'}
158+
onFloatingSuggestionsDismiss={undefined}
159+
showSuggestionRemoveButton={true}
160+
onSuggestionSelected={_onSuggestionSelected}
161+
onRemoveSuggestion={_onSuggestionRemoved}
162+
/>,
163+
);
164+
185165
const suggestionsList = document.querySelectorAll('div[id^=FloatingSuggestionsItemId]');
186166
expect(suggestionsList.length).toEqual(0);
187167

‎packages/react-experiments/src/components/Slider/Slider.test.tsx‎

Lines changed: 14 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
1+
import '@testing-library/jest-dom';
12
import * as React from 'react';
2-
import * as ReactDOM from 'react-dom';
33
import * as renderer from 'react-test-renderer';
4-
import * as ReactTestUtils from 'react-dom/test-utils';
5-
import { render, fireEvent } from '@testing-library/react';
6-
import '@testing-library/jest-dom';
4+
import { render, fireEvent, act } from '@testing-library/react';
75

86
import { Slider } from './Slider';
97
import { ONKEYDOWN_TIMEOUT_DURATION } from './Slider.base';
@@ -124,30 +122,26 @@ describe('Slider', () => {
124122
jest.useFakeTimers();
125123
const onChanged = jest.fn();
126124

127-
const container = document.createElement('div');
128-
document.body.appendChild(container);
129-
130-
ReactDOM.render(<Slider label="slider" defaultValue={12} min={0} max={100} onChanged={onChanged} />, container);
125+
const { container } = render(<Slider label="slider" defaultValue={12} min={0} max={100} onChanged={onChanged} />);
131126
const sliderSlideBox = container.querySelector('.ms-Slider-slideBox') as HTMLElement;
132127

133-
ReactTestUtils.Simulate.keyDown(sliderSlideBox, { which: KeyCodes.down });
134-
ReactTestUtils.Simulate.keyDown(sliderSlideBox, { which: KeyCodes.down });
135-
ReactTestUtils.Simulate.keyDown(sliderSlideBox, { which: KeyCodes.down });
136-
ReactTestUtils.Simulate.keyDown(sliderSlideBox, { which: KeyCodes.up });
137-
ReactTestUtils.Simulate.keyDown(sliderSlideBox, { which: KeyCodes.down });
128+
// Need to use keyCode for React Testing Library instead of which
129+
fireEvent.keyDown(sliderSlideBox, { keyCode: KeyCodes.down });
130+
fireEvent.keyDown(sliderSlideBox, { keyCode: KeyCodes.down });
131+
fireEvent.keyDown(sliderSlideBox, { keyCode: KeyCodes.down });
132+
fireEvent.keyDown(sliderSlideBox, { keyCode: KeyCodes.up });
133+
fireEvent.keyDown(sliderSlideBox, { keyCode: KeyCodes.down });
138134

139-
expect(sliderSlideBox.getAttribute('aria-valuenow')).toEqual('9');
135+
expect(sliderSlideBox).toHaveAttribute('aria-valuenow', '9');
140136

141137
// onChanged should only be called after a delay
142138
expect(onChanged).toHaveBeenCalledTimes(0);
143139

144-
setTimeout(() => {
145-
expect(onChanged).toHaveBeenCalledTimes(1);
146-
}, ONKEYDOWN_TIMEOUT_DURATION);
147-
148-
jest.runOnlyPendingTimers();
140+
act(() => {
141+
jest.advanceTimersByTime(ONKEYDOWN_TIMEOUT_DURATION);
142+
});
149143

150-
ReactDOM.unmountComponentAtNode(container);
144+
expect(onChanged).toHaveBeenCalledTimes(1);
151145
});
152146

153147
it('should be able to display the correct custom labels & tickmarks at the correct positions', () => {

0 commit comments

Comments
 (0)