Skip to content

Commit ebc609c

Browse files
authored
feat: add support for TypeScript tests in @carbon/react (#22150)
* feat: add support for TypeScript tests in @carbon/react * test: limit TypeScript coverage collection * refactor: update todo * refactor: update todo
1 parent b4b942d commit ebc609c

8 files changed

Lines changed: 50 additions & 9 deletions

File tree

jest.config.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* Copyright IBM Corp. 2018, 2025
2+
* Copyright IBM Corp. 2018, 2026
33
*
44
* This source code is licensed under the Apache-2.0 license found in the
55
* LICENSE file in the root directory of this source tree.
@@ -8,6 +8,11 @@
88
export default {
99
preset: 'jest-config-carbon',
1010
testEnvironment: 'jsdom',
11+
testMatch: [
12+
'<rootDir>/**/__tests__/**/*.@(js|jsx|ts|tsx)',
13+
'<rootDir>/**/*.(spec|test).@(js|jsx|ts|tsx)',
14+
'<rootDir>/**/*-(spec|test).@(js|jsx|ts|tsx)',
15+
],
1116
collectCoverageFrom: [
1217
'packages/**/src/**/*.js',
1318
'packages/**/src/**/*.tsx',

packages/react/src/components/Accordion/__tests__/Accordion-test.js renamed to packages/react/src/components/Accordion/__tests__/Accordion-test.tsx

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
/**
2-
* Copyright IBM Corp. 2016, 2023
2+
* Copyright IBM Corp. 2016, 2026
33
*
44
* This source code is licensed under the Apache-2.0 license found in the
55
* LICENSE file in the root directory of this source tree.
66
*/
77

8+
import { describe, expect, it } from '@jest/globals';
9+
import '@testing-library/jest-dom/jest-globals';
810
import Button from '../../Button';
911
import React from 'react';
10-
import { default as Accordion, AccordionItem } from '../';
12+
import { Accordion, AccordionItem } from '../';
1113
import { render, screen } from '@testing-library/react';
1214
import userEvent from '@testing-library/user-event';
1315

@@ -198,6 +200,9 @@ describe('Accordion', () => {
198200
});
199201

200202
describe('Expand/Collapse All', () => {
203+
// TODO: This component doesn't model a controlled `Accordion` correctly. It
204+
// uses `null` to force `open` prop changes, and it does not update parent
205+
// state when an item is toggled manually.
201206
const ControlledAccordion = () => {
202207
const [expandAll, setExpandAll] = React.useState(false);
203208
return (
@@ -209,7 +214,7 @@ describe('Accordion', () => {
209214
onClick={() => {
210215
expandAll || expandAll === null
211216
? setExpandAll(false)
212-
: setExpandAll(null);
217+
: setExpandAll(null as unknown as boolean);
213218
}}>
214219
Click to collapse all
215220
</Button>

packages/react/src/components/Accordion/__tests__/AccordionItem-test.js renamed to packages/react/src/components/Accordion/__tests__/AccordionItem-test.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,10 @@
55
* LICENSE file in the root directory of this source tree.
66
*/
77

8+
import { describe, expect, it, jest } from '@jest/globals';
9+
import '@testing-library/jest-dom/jest-globals';
810
import React from 'react';
11+
import type { AccordionToggleProps } from '../AccordionItem';
912
import AccordionItem from '../AccordionItem';
1013
import userEvent from '@testing-library/user-event';
1114
import { render, screen } from '@testing-library/react';
@@ -95,10 +98,8 @@ describe('AccordionItem', () => {
9598
});
9699

97100
it('should respect renderToggle prop', () => {
98-
const renderToggle = jest.fn((props) => (
99-
<svg {...props} data-testid="icon">
100-
<circle cx="16" cy="16" r="8" />
101-
</svg>
101+
const renderToggle = jest.fn((props: AccordionToggleProps) => (
102+
<button {...props} data-testid="icon" />
102103
));
103104
render(<AccordionItem renderToggle={renderToggle} />);
104105

packages/react/src/components/Accordion/__tests__/AccordionSkeleton-test.js renamed to packages/react/src/components/Accordion/__tests__/AccordionSkeleton-test.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
/**
2-
* Copyright IBM Corp. 2022
2+
* Copyright IBM Corp. 2022, 2026
33
*
44
* This source code is licensed under the Apache-2.0 license found in the
55
* LICENSE file in the root directory of this source tree.
66
*/
77

8+
import { describe, expect, it } from '@jest/globals';
9+
import '@testing-library/jest-dom/jest-globals';
810
import React from 'react';
911
import AccordionSkeleton from '../Accordion.Skeleton';
1012
import { render, screen } from '@testing-library/react';

packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap renamed to packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.tsx.snap

File renamed without changes.

packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.js.snap renamed to packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.tsx.snap

File renamed without changes.

packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionSkeleton-test.js.snap renamed to packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionSkeleton-test.tsx.snap

File renamed without changes.

packages/react/src/types/jest.d.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/**
2+
* Copyright IBM Corp. 2026
3+
*
4+
* This source code is licensed under the Apache-2.0 license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
// TODO: Investigate whether migrating `config/jest-config-carbon` to
9+
// TypeScript, or another similar change, would eliminate the need for these
10+
// types.
11+
// https://github.com/carbon-design-system/carbon/pull/22150#discussion_r3228269366
12+
declare module '@jest/expect' {
13+
interface Matchers<R extends void | Promise<void>, T = unknown> {
14+
toHaveNoAxeViolations(): R;
15+
toHaveNoACViolations(label: string): R;
16+
}
17+
}
18+
19+
declare global {
20+
namespace jest {
21+
interface Matchers<R = void, T = unknown> {
22+
toHaveNoAxeViolations(): R;
23+
toHaveNoACViolations(label: string): R;
24+
}
25+
}
26+
}
27+
28+
export {};

0 commit comments

Comments
 (0)