Skip to content

Commit 3313498

Browse files
JackWilbJackWilb
committed
Clean up React test warnings
1 parent 8c6de98 commit 3313498

12 files changed

Lines changed: 99 additions & 51 deletions

File tree

‎src/analysis/individualStudy/stats/tests/StatsView.spec.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ReactNode } from 'react';
1+
import { forwardRef, ReactNode } from 'react';
22
import { renderToStaticMarkup } from 'react-dom/server';
33
import {
44
beforeEach, describe, expect, test, vi,
@@ -31,7 +31,9 @@ vi.mock('@mantine/core', () => ({
3131
Box: ({ children }: { children: ReactNode }) => <div>{children}</div>,
3232
Divider: () => <hr />,
3333
Flex: ({ children }: { children: ReactNode }) => <div>{children}</div>,
34-
Paper: ({ children, ref: _ref }: { children: ReactNode; ref?: React.Ref<HTMLElement> }) => <div>{children}</div>,
34+
Paper: forwardRef<HTMLDivElement, { children: ReactNode }>(function Paper({ children }, ref) { // eslint-disable-line prefer-arrow-callback
35+
return <div ref={ref}>{children}</div>;
36+
}),
3537
Text: ({ children }: { children: ReactNode }) => <p>{children}</p>,
3638
Title: ({ children }: { children: ReactNode }) => <h5>{children}</h5>,
3739
Collapse: ({ children, in: open }: { children: ReactNode; in?: boolean }) => (

‎src/analysis/individualStudy/thinkAloud/tests/ThinkAloudAnalysis.spec.tsx‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ReactNode } from 'react';
1+
import { forwardRef, ReactNode } from 'react';
22
import { renderToStaticMarkup } from 'react-dom/server';
33
import {
44
render, act, cleanup, fireEvent, waitFor,
@@ -116,7 +116,11 @@ vi.mock('@mantine/core', () => ({
116116
),
117117
Grid: Object.assign(
118118
({ children }: { children: ReactNode }) => <div>{children}</div>,
119-
{ Col: ({ children, ref: _r, ...rest }: { children: ReactNode; ref?: React.Ref<HTMLElement> }) => <div {...rest}>{children}</div> },
119+
{
120+
Col: forwardRef<HTMLDivElement, { children: ReactNode }>(function Col({ children, ...rest }, ref) { // eslint-disable-line prefer-arrow-callback
121+
return <div ref={ref} {...rest}>{children}</div>;
122+
}),
123+
},
120124
),
121125
Group: ({ children, style }: { children: ReactNode; style?: object }) => <div style={style}>{children}</div>,
122126
HoverCard: Object.assign(
@@ -157,17 +161,19 @@ vi.mock('@mantine/core', () => ({
157161
{rightSection}
158162
</div>
159163
),
160-
Stack: ({ children }: { children: ReactNode }) => <div>{children}</div>,
164+
Stack: forwardRef<HTMLDivElement, { children: ReactNode }>(function Stack({ children }, ref) { // eslint-disable-line prefer-arrow-callback
165+
return <div ref={ref}>{children}</div>;
166+
}),
161167
Text: ({ children }: { children: ReactNode }) => <p>{children}</p>,
162-
Textarea: ({
163-
value, onChange, onKeyDown, onFocus, placeholder, onBlur, defaultValue,
164-
}: {
168+
Textarea: forwardRef<HTMLTextAreaElement, {
165169
value?: string; defaultValue?: string; onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
166170
onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>; onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
167171
placeholder?: string; onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
168-
}) => (
169-
<textarea data-testid="textarea" value={value} defaultValue={defaultValue} onChange={onChange} onKeyDown={onKeyDown} onFocus={onFocus} placeholder={placeholder} onBlur={onBlur} />
170-
),
172+
}>(function Textarea({ // eslint-disable-line prefer-arrow-callback
173+
value, onChange, onKeyDown, onFocus, placeholder, onBlur, defaultValue,
174+
}, ref) {
175+
return <textarea ref={ref} data-testid="textarea" value={value} defaultValue={defaultValue} onChange={onChange} onKeyDown={onKeyDown} onFocus={onFocus} placeholder={placeholder} onBlur={onBlur} />;
176+
}),
171177
TextInput: ({ placeholder, value }: { placeholder?: string; value?: string }) => <input placeholder={placeholder} defaultValue={value} />,
172178
Tooltip: ({ children, label }: { children: ReactNode; label?: ReactNode }) => <div title={String(label)}>{children}</div>,
173179
useCombobox: () => ({ toggleDropdown: vi.fn(), openDropdown: vi.fn(), closeDropdown: vi.fn() }),

‎src/analysis/tests/StudyAnalysisTabs.spec.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ReactNode } from 'react';
1+
import { forwardRef, ReactNode } from 'react';
22
import { renderToStaticMarkup } from 'react-dom/server';
33
import {
44
render, act, cleanup, screen, waitFor, fireEvent,
@@ -141,7 +141,9 @@ vi.mock('@mantine/core', () => ({
141141
Flex: ({ children }: { children: ReactNode }) => <div>{children}</div>,
142142
Group: ({ children }: { children: ReactNode }) => <div>{children}</div>,
143143
LoadingOverlay: () => null,
144-
Stack: ({ children }: { children: ReactNode }) => <div>{children}</div>,
144+
Stack: forwardRef<HTMLDivElement, { children: ReactNode }>(function Stack({ children }, ref) { // eslint-disable-line prefer-arrow-callback
145+
return <div ref={ref}>{children}</div>;
146+
}),
145147
Tabs: Object.assign(
146148
({ children }: { children: ReactNode }) => <div>{children}</div>,
147149
{

‎src/components/audioAnalysis/tests/AudioProvenanceVis.spec.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ReactNode } from 'react';
1+
import { forwardRef, ReactNode } from 'react';
22
import { renderToStaticMarkup } from 'react-dom/server';
33
import {
44
render, act, cleanup, renderHook,
@@ -20,12 +20,16 @@ vi.mock('wavesurfer-react', () => ({
2020
}));
2121

2222
vi.mock('@mantine/core', () => ({
23-
Box: ({ children }: { children?: ReactNode }) => <div>{children}</div>,
23+
Box: forwardRef<HTMLDivElement, { children?: ReactNode }>(function Box({ children }, ref) { // eslint-disable-line prefer-arrow-callback
24+
return <div ref={ref}>{children}</div>;
25+
}),
2426
Group: ({ children }: { children?: ReactNode }) => <div>{children}</div>,
2527
LoadingOverlay: ({ visible }: { visible: boolean }) => (
2628
visible ? <div data-testid="loading-overlay" /> : null
2729
),
28-
Stack: ({ children }: { children?: ReactNode }) => <div>{children}</div>,
30+
Stack: forwardRef<HTMLDivElement, { children?: ReactNode }>(function Stack({ children }, ref) { // eslint-disable-line prefer-arrow-callback
31+
return <div ref={ref}>{children}</div>;
32+
}),
2933
}));
3034

3135
vi.mock('@mantine/hooks', () => ({

‎src/components/downloader/DownloadTidy.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -528,12 +528,10 @@ export function DownloadTidy({
528528
<Progress value={downloadProgress} animated />
529529
)}
530530
<Box>
531-
<Text size="sm" fw={500} mb="xs">
532-
<Flex align="center" gap="xs">
533-
<IconLayoutColumns size={16} />
534-
Optional columns:
535-
</Flex>
536-
</Text>
531+
<Flex align="center" gap="xs" mb="xs">
532+
<IconLayoutColumns size={16} />
533+
<Text size="sm" fw={500}>Optional columns:</Text>
534+
</Flex>
537535
<Flex wrap="wrap" gap="4px">
538536
{OPTIONAL_COMMON_PROPS.filter((prop) => prop !== 'transcript' || transcriptAvailable).map((prop) => {
539537
const isSelected = selectedProperties.includes(prop);

‎src/components/interface/tests/AppHeader.spec.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ReactNode } from 'react';
1+
import { forwardRef, ReactNode } from 'react';
22
import { renderToStaticMarkup } from 'react-dom/server';
33
import {
44
render, act, cleanup,
@@ -72,7 +72,9 @@ vi.mock('@mantine/core', () => ({
7272
),
7373
Progress: ({ value }: { value: number }) => <div data-testid="progress" data-value={value} />,
7474
Space: () => <span />,
75-
Title: ({ children }: { children: ReactNode }) => <h1>{children}</h1>,
75+
Title: forwardRef<HTMLHeadingElement, { children: ReactNode }>(function Title({ children }, ref) { // eslint-disable-line prefer-arrow-callback
76+
return <h1 ref={ref}>{children}</h1>;
77+
}),
7678
Tooltip: ({ children }: { children: ReactNode }) => <div>{children}</div>,
7779
Text: ({ children }: { children: ReactNode }) => <p>{children}</p>,
7880
}));

‎src/components/interface/tests/StepsPanel.spec.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ReactNode } from 'react';
1+
import { forwardRef, ReactNode } from 'react';
22
import {
33
render, act, cleanup, fireEvent,
44
} from '@testing-library/react';
@@ -53,7 +53,9 @@ vi.mock('../../../parser/utils', () => ({
5353

5454
vi.mock('@mantine/core', () => ({
5555
Badge: ({ children }: { children: ReactNode }) => <span>{children}</span>,
56-
Box: ({ children }: { children: ReactNode }) => <div>{children}</div>,
56+
Box: forwardRef<HTMLDivElement, { children: ReactNode }>(function Box({ children }, ref) { // eslint-disable-line prefer-arrow-callback
57+
return <div ref={ref}>{children}</div>;
58+
}),
5759
Code: ({ children }: { children: ReactNode }) => <code>{children}</code>,
5860
Flex: ({ children }: { children: ReactNode }) => <div>{children}</div>,
5961
HoverCard: Object.assign(
@@ -70,7 +72,7 @@ vi.mock('@mantine/core', () => ({
7072
</div>
7173
),
7274
Text: ({ children }: { children: ReactNode }) => <p>{children}</p>,
73-
Tooltip: ({ children }: { children: ReactNode }) => <div>{children}</div>,
75+
Tooltip: ({ children }: { children: ReactNode }) => children,
7476
Button: ({ children, onClick }: { children: ReactNode; onClick?: () => void }) => (
7577
<button type="button" onClick={onClick}>{children}</button>
7678
),

‎src/components/response/tests/RankingInput.spec.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,9 @@ vi.mock('@mantine/core', () => ({
7575
}) => React.createElement('button', { type: 'button', onClick, disabled }, children),
7676
Flex: ({ children }: { children?: React.ReactNode }) => React.createElement('div', null, children),
7777
Group: ({ children }: { children?: React.ReactNode }) => React.createElement('div', null, children),
78-
Paper: ({ children }: { children?: React.ReactNode }) => React.createElement('div', null, children),
78+
Paper: React.forwardRef<HTMLDivElement, { children?: React.ReactNode }>(function Paper({ children }, ref) { // eslint-disable-line prefer-arrow-callback
79+
return React.createElement('div', { ref }, children);
80+
}),
7981
Stack: ({ children }: { children?: React.ReactNode }) => React.createElement('div', null, children),
8082
Text: ({ children }: { children?: React.ReactNode }) => React.createElement('span', null, children),
8183
}));

‎src/components/response/tests/ResponseBlock.spec.tsx‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { Provider } from 'react-redux';
33
import {
44
render, act, fireEvent, cleanup,
55
} from '@testing-library/react';
6-
import { renderToStaticMarkup } from 'react-dom/server';
76
import {
87
afterEach, beforeEach, describe, expect, test, vi,
98
} from 'vitest';
@@ -300,25 +299,29 @@ afterEach(() => cleanup());
300299
describe('ResponseBlock', () => {
301300
test('renders without error', async () => {
302301
const studyStore = await makeStudyStore();
303-
const html = renderToStaticMarkup(withStore(studyStore, <ResponseBlock config={baseConfig} location="belowStimulus" />));
302+
const { container } = render(withStore(studyStore, <ResponseBlock config={baseConfig} location="belowStimulus" />));
303+
const html = container.innerHTML;
304304
expect(html).toContain('<div');
305305
});
306306

307307
test('renders ResponseSwitcher for response at matching location', async () => {
308308
const studyStore = await makeStudyStore();
309-
const html = renderToStaticMarkup(withStore(studyStore, <ResponseBlock config={baseConfig} location="belowStimulus" />));
309+
const { container } = render(withStore(studyStore, <ResponseBlock config={baseConfig} location="belowStimulus" />));
310+
const html = container.innerHTML;
310311
expect(html).toContain('switcher-shortText');
311312
});
312313

313314
test('shows NextButton when location matches nextButtonLocation', async () => {
314315
const studyStore = await makeStudyStore();
315-
const html = renderToStaticMarkup(withStore(studyStore, <ResponseBlock config={baseConfig} location="belowStimulus" />));
316+
const { container } = render(withStore(studyStore, <ResponseBlock config={baseConfig} location="belowStimulus" />));
317+
const html = container.innerHTML;
316318
expect(html).toContain('Next');
317319
});
318320

319321
test('omits NextButton when location does not match nextButtonLocation', async () => {
320322
const studyStore = await makeStudyStore();
321-
const html = renderToStaticMarkup(withStore(studyStore, <ResponseBlock config={baseConfig} location="sidebar" />));
323+
const { container } = render(withStore(studyStore, <ResponseBlock config={baseConfig} location="sidebar" />));
324+
const html = container.innerHTML;
322325
expect(html).not.toContain('Next');
323326
});
324327

@@ -332,13 +335,15 @@ describe('ResponseBlock', () => {
332335
],
333336
} as IndividualComponent;
334337
const studyStore = await makeStudyStore();
335-
const html = renderToStaticMarkup(withStore(studyStore, <ResponseBlock config={hiddenConfig} location="belowStimulus" />));
338+
const { container } = render(withStore(studyStore, <ResponseBlock config={hiddenConfig} location="belowStimulus" />));
339+
const html = container.innerHTML;
336340
expect(html).not.toContain('switcher-shortText');
337341
});
338342

339343
test('renders with provided style prop without error', async () => {
340344
const studyStore = await makeStudyStore();
341-
const html = renderToStaticMarkup(withStore(studyStore, <ResponseBlock config={baseConfig} location="belowStimulus" style={{ color: 'red' }} />));
345+
const { container } = render(withStore(studyStore, <ResponseBlock config={baseConfig} location="belowStimulus" style={{ color: 'red' }} />));
346+
const html = container.innerHTML;
342347
expect(html).toContain('switcher-shortText');
343348
});
344349

@@ -348,7 +353,8 @@ describe('ResponseBlock', () => {
348353
nextButtonText: 'Submit',
349354
} as IndividualComponent;
350355
const studyStore = await makeStudyStore();
351-
const html = renderToStaticMarkup(withStore(studyStore, <ResponseBlock config={configWithText} location="belowStimulus" />));
356+
const { container } = render(withStore(studyStore, <ResponseBlock config={configWithText} location="belowStimulus" />));
357+
const html = container.innerHTML;
352358
expect(html).toContain('Submit');
353359
});
354360

@@ -359,7 +365,8 @@ describe('ResponseBlock', () => {
359365
correctAnswer: [{ id: 'q1', answer: 'correct' }],
360366
} as IndividualComponent;
361367
const studyStore = await makeStudyStore();
362-
const html = renderToStaticMarkup(withStore(studyStore, <ResponseBlock config={configWithFeedback} location="belowStimulus" />));
368+
const { container } = render(withStore(studyStore, <ResponseBlock config={configWithFeedback} location="belowStimulus" />));
369+
const html = container.innerHTML;
363370
expect(html).toContain('Check Answer');
364371
});
365372

@@ -369,7 +376,8 @@ describe('ResponseBlock', () => {
369376
response: [{ type: 'textOnly', id: 'q1', prompt: 'Read this.' }],
370377
} as IndividualComponent;
371378
const studyStore = await makeStudyStore();
372-
const html = renderToStaticMarkup(withStore(studyStore, <ResponseBlock config={textOnlyConfig} location="belowStimulus" />));
379+
const { container } = render(withStore(studyStore, <ResponseBlock config={textOnlyConfig} location="belowStimulus" />));
380+
const html = container.innerHTML;
373381
expect(html).toContain('switcher-textOnly');
374382
});
375383

‎src/components/response/tests/ResponseInput.spec.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ReactNode } from 'react';
1+
import { forwardRef, ReactNode } from 'react';
22
import { renderToStaticMarkup } from 'react-dom/server';
33
import {
44
render, act, cleanup,
@@ -42,9 +42,9 @@ import type {
4242
// ── mocks ────────────────────────────────────────────────────────────────────
4343

4444
vi.mock('@mantine/core', () => {
45-
function Div({ children }: { children?: ReactNode }) {
46-
return <div>{children}</div>;
47-
}
45+
const Div = forwardRef<HTMLDivElement, { children?: ReactNode }>(function Div({ children }, ref) { // eslint-disable-line prefer-arrow-callback
46+
return <div ref={ref}>{children}</div>;
47+
});
4848
function Span({ children }: { children?: ReactNode }) {
4949
return <span>{children}</span>;
5050
}

0 commit comments

Comments
 (0)