From e24e96f4070220b42559b4bc8558a4e7e391702e Mon Sep 17 00:00:00 2001 From: Josh Black Date: Wed, 25 Sep 2024 13:12:37 -0500 Subject: [PATCH 01/11] refactor(BranchName): update BranchName to use CSS Modules --- e2e/components/BranchName.test.ts | 164 ++++++++---------- .../src/BranchName/BranchName.module.css | 14 ++ packages/react/src/BranchName/BranchName.tsx | 39 ++++- 3 files changed, 122 insertions(+), 95 deletions(-) create mode 100644 packages/react/src/BranchName/BranchName.module.css diff --git a/e2e/components/BranchName.test.ts b/e2e/components/BranchName.test.ts index feb776b3101..24a7ce82102 100644 --- a/e2e/components/BranchName.test.ts +++ b/e2e/components/BranchName.test.ts @@ -2,110 +2,90 @@ import {test, expect} from '@playwright/test' import {visit} from '../test-helpers/storybook' import {themes} from '../test-helpers/themes' -test.describe('BranchName', () => { - test.describe('Default', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-branchname--default', - globals: { - colorScheme: theme, - }, - }) +const stories = [ + { + title: 'Default', + id: 'components-branchname--default', + focus: true, + }, + { + title: 'Not A Link', + id: 'components-branchname-features--not-a-link', + focus: false, + }, + { + title: 'With A Branch Icon', + id: 'components-branchname-features--with-branch-icon', + focus: false, + }, +] as const - // Default state - expect(await page.screenshot()).toMatchSnapshot(`BranchName.Default.${theme}.png`) +test.describe('BranchName', () => { + for (const story of stories) { + test.describe(story.title, () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: story.id, + globals: { + colorScheme: theme, + primer_react_css_modules_team: true, + }, + }) - // Focus state - await page.keyboard.press('Tab') - expect(await page.screenshot()).toMatchSnapshot(`BranchName.Default.${theme}.focus.png`) - }) + // Default state + expect(await page.screenshot()).toMatchSnapshot(`BranchName.${story.title}.${theme}.png`) - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-branchname--default', - globals: { - colorScheme: theme, - }, + // Focus state + if (story.focus) { + await page.keyboard.press('Tab') + expect(await page.screenshot()).toMatchSnapshot(`BranchName.${story.title}.${theme}.focus.png`) + } }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } - }) - test.describe('Not A Link', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-branchname-features--not-a-link', - globals: { - colorScheme: theme, - }, - }) + test('default (styled-components) @vrt', async ({page}) => { + await visit(page, { + id: story.id, + globals: { + colorScheme: theme, + primer_react_css_modules_team: false, + }, + }) - // Default state - expect(await page.screenshot()).toMatchSnapshot(`BranchName.Not A Link.${theme}.png`) - }) + // Default state + expect(await page.screenshot()).toMatchSnapshot(`BranchName.${story.title}.${theme}.png`) - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-branchname-features--not-a-link', - globals: { - colorScheme: theme, - }, + // Focus state + if (story.focus) { + await page.keyboard.press('Tab') + expect(await page.screenshot()).toMatchSnapshot(`BranchName.${story.title}.${theme}.focus.png`) + } }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } - }) - test.describe('With A Branch Icon', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-branchname-features--with-branch-icon', - globals: { - colorScheme: theme, - }, + test('axe @aat', async ({page}) => { + await visit(page, { + id: story.id, + globals: { + colorScheme: theme, + primer_react_css_modules_team: true, + }, + }) + await expect(page).toHaveNoViolations() }) - // Default state - expect(await page.screenshot()).toMatchSnapshot(`BranchName.With A Branch Icon.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-branchname-features--with-branch-icon', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', + test('axe (styled-components) @aat', async ({page}) => { + await visit(page, { + id: story.id, + globals: { + colorScheme: theme, + primer_react_css_modules_team: false, }, - }, + }) + await expect(page).toHaveNoViolations() }) }) - }) - } - }) + } + }) + } }) diff --git a/packages/react/src/BranchName/BranchName.module.css b/packages/react/src/BranchName/BranchName.module.css new file mode 100644 index 00000000000..66e9abc2d50 --- /dev/null +++ b/packages/react/src/BranchName/BranchName.module.css @@ -0,0 +1,14 @@ +.BranchName { + display: inline-block; + padding: var(--base-size-2) var(--base-size-6); + font-family: var(--fontStack-monospace); + font-size: var(--text-body-size-small); + color: var(--fgColor-link); + text-decoration: none; + background-color: var(--bgColor-accent-muted); + border-radius: var(--borderRadius-medium); + + &:is(:not(a)) { + color: var(--fgColor-muted); + } +} diff --git a/packages/react/src/BranchName/BranchName.tsx b/packages/react/src/BranchName/BranchName.tsx index 010777c4a2a..103abdb6417 100644 --- a/packages/react/src/BranchName/BranchName.tsx +++ b/packages/react/src/BranchName/BranchName.tsx @@ -1,10 +1,14 @@ +import {clsx} from 'clsx' import styled from 'styled-components' import {get} from '../constants' import type {SxProp} from '../sx' import sx from '../sx' -import type {ComponentProps} from '../utils/types' +import {useFeatureFlag} from '../FeatureFlags' +import {defaultSxProp} from '../utils/defaultSxProp' +import Box from '../Box' +import classes from './BranchName.module.css' -const BranchName = styled.a` +const StyledBranchName = styled.a` display: inline-block; padding: 2px 6px; font-size: var(--text-body-size-small, ${get('fontSizes.0')}); @@ -19,5 +23,34 @@ const BranchName = styled.a` ${sx}; ` -export type BranchNameProps = ComponentProps +type BranchNameProps = { + as?: As +} & React.ComponentPropsWithoutRef & + SxProp + +function BranchName(props: BranchNameProps) { + const {as: BaseComponent = 'a', className, children, sx = defaultSxProp, ...rest} = props + const enabled = useFeatureFlag('primer_react_css_modules_team') + if (enabled) { + if (sx) { + return ( + + {children} + + ) + } + return ( + + {children} + + ) + } + return ( + + {children} + + ) +} + +export type {BranchNameProps} export default BranchName From 7eba0be83564429baf78af86135926f92012756d Mon Sep 17 00:00:00 2001 From: Josh Black Date: Wed, 25 Sep 2024 13:14:21 -0500 Subject: [PATCH 02/11] chore: add changeset --- .changeset/four-schools-grin.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/four-schools-grin.md diff --git a/.changeset/four-schools-grin.md b/.changeset/four-schools-grin.md new file mode 100644 index 00000000000..72c447d1a85 --- /dev/null +++ b/.changeset/four-schools-grin.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +Update BranchName to use CSS Modules behind feature flag From 5ea79c9a172f8cbed652f636f827bc0fd6b07529 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Wed, 25 Sep 2024 13:45:47 -0500 Subject: [PATCH 03/11] fix: use sx instead of defaultSxProp --- packages/react/src/BranchName/BranchName.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react/src/BranchName/BranchName.tsx b/packages/react/src/BranchName/BranchName.tsx index 103abdb6417..b68930daf55 100644 --- a/packages/react/src/BranchName/BranchName.tsx +++ b/packages/react/src/BranchName/BranchName.tsx @@ -1,3 +1,4 @@ +import React from 'react' import {clsx} from 'clsx' import styled from 'styled-components' import {get} from '../constants' @@ -46,7 +47,7 @@ function BranchName(props: BranchNameProps) { ) } return ( - + {children} ) From 97da55d72a249b4a5d18181a79083357d1db8b20 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Wed, 25 Sep 2024 14:07:23 -0500 Subject: [PATCH 04/11] chore: remove defaultSxProp --- packages/react/src/BranchName/BranchName.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/react/src/BranchName/BranchName.tsx b/packages/react/src/BranchName/BranchName.tsx index b68930daf55..e07460191f9 100644 --- a/packages/react/src/BranchName/BranchName.tsx +++ b/packages/react/src/BranchName/BranchName.tsx @@ -5,7 +5,6 @@ import {get} from '../constants' import type {SxProp} from '../sx' import sx from '../sx' import {useFeatureFlag} from '../FeatureFlags' -import {defaultSxProp} from '../utils/defaultSxProp' import Box from '../Box' import classes from './BranchName.module.css' @@ -30,7 +29,7 @@ type BranchNameProps = { SxProp function BranchName(props: BranchNameProps) { - const {as: BaseComponent = 'a', className, children, sx = defaultSxProp, ...rest} = props + const {as: BaseComponent = 'a', className, children, sx, ...rest} = props const enabled = useFeatureFlag('primer_react_css_modules_team') if (enabled) { if (sx) { From 0bb1f5d43fc9032a22c815ca12d30b3e4524c3f8 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Fri, 27 Sep 2024 10:08:54 -0500 Subject: [PATCH 05/11] chore: experiment with forward ref --- packages/react/src/BranchName/BranchName.tsx | 18 ++++++++++++------ packages/react/src/utils/fixedForwardRef.ts | 10 ++++++++++ 2 files changed, 22 insertions(+), 6 deletions(-) create mode 100644 packages/react/src/utils/fixedForwardRef.ts diff --git a/packages/react/src/BranchName/BranchName.tsx b/packages/react/src/BranchName/BranchName.tsx index e07460191f9..ca38f1836fd 100644 --- a/packages/react/src/BranchName/BranchName.tsx +++ b/packages/react/src/BranchName/BranchName.tsx @@ -7,6 +7,7 @@ import sx from '../sx' import {useFeatureFlag} from '../FeatureFlags' import Box from '../Box' import classes from './BranchName.module.css' +import {forwardRef} from '../utils/fixedForwardRef' const StyledBranchName = styled.a` display: inline-block; @@ -25,32 +26,37 @@ const StyledBranchName = styled.a` type BranchNameProps = { as?: As -} & React.ComponentPropsWithoutRef & +} & DistributiveOmit, 'as'> & SxProp -function BranchName(props: BranchNameProps) { +type DistributiveOmit = T extends any ? Omit : never + +const BranchName = forwardRef(function BranchName( + props: BranchNameProps, + ref: React.ForwardedRef, +) { const {as: BaseComponent = 'a', className, children, sx, ...rest} = props const enabled = useFeatureFlag('primer_react_css_modules_team') if (enabled) { if (sx) { return ( - + {children} ) } return ( - + {children} ) } return ( - + {children} ) -} +}) export type {BranchNameProps} export default BranchName diff --git a/packages/react/src/utils/fixedForwardRef.ts b/packages/react/src/utils/fixedForwardRef.ts new file mode 100644 index 00000000000..61a26632bb5 --- /dev/null +++ b/packages/react/src/utils/fixedForwardRef.ts @@ -0,0 +1,10 @@ +import {forwardRef} from 'react' +import type React from 'react' + +export type FixedForwardRef = ( + render: (props: P, ref: React.Ref) => React.ReactNode, +) => (props: P & React.RefAttributes) => React.ReactNode + +const fixedForwardRef = forwardRef as FixedForwardRef + +export {fixedForwardRef as forwardRef} From dab3c9752b17ca84426a3f695466e2b356cd2111 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Tue, 22 Oct 2024 18:44:31 -0700 Subject: [PATCH 06/11] Remove feature flag duplication --- e2e/components/BranchName.test.ts | 32 ------------------------------- 1 file changed, 32 deletions(-) diff --git a/e2e/components/BranchName.test.ts b/e2e/components/BranchName.test.ts index 24a7ce82102..a735fa8ae31 100644 --- a/e2e/components/BranchName.test.ts +++ b/e2e/components/BranchName.test.ts @@ -30,26 +30,6 @@ test.describe('BranchName', () => { id: story.id, globals: { colorScheme: theme, - primer_react_css_modules_team: true, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`BranchName.${story.title}.${theme}.png`) - - // Focus state - if (story.focus) { - await page.keyboard.press('Tab') - expect(await page.screenshot()).toMatchSnapshot(`BranchName.${story.title}.${theme}.focus.png`) - } - }) - - test('default (styled-components) @vrt', async ({page}) => { - await visit(page, { - id: story.id, - globals: { - colorScheme: theme, - primer_react_css_modules_team: false, }, }) @@ -68,18 +48,6 @@ test.describe('BranchName', () => { id: story.id, globals: { colorScheme: theme, - primer_react_css_modules_team: true, - }, - }) - await expect(page).toHaveNoViolations() - }) - - test('axe (styled-components) @aat', async ({page}) => { - await visit(page, { - id: story.id, - globals: { - colorScheme: theme, - primer_react_css_modules_team: false, }, }) await expect(page).toHaveNoViolations() From 9bd1aee4665d7077799c367315351a8a4dc89951 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Tue, 22 Oct 2024 18:48:01 -0700 Subject: [PATCH 07/11] Add test for `className` support in `BranchName` --- .../BranchName/__tests__/BranchName.test.tsx | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/packages/react/src/BranchName/__tests__/BranchName.test.tsx b/packages/react/src/BranchName/__tests__/BranchName.test.tsx index 9b533e2ed34..3687f591194 100644 --- a/packages/react/src/BranchName/__tests__/BranchName.test.tsx +++ b/packages/react/src/BranchName/__tests__/BranchName.test.tsx @@ -3,6 +3,7 @@ import BranchName from '../BranchName' import {render, behavesAsComponent, checkExports} from '../../utils/testing' import {render as HTMLRender} from '@testing-library/react' import axe from 'axe-core' +import {FeatureFlags} from '../../FeatureFlags' describe('BranchName', () => { behavesAsComponent({Component: BranchName}) @@ -20,4 +21,23 @@ describe('BranchName', () => { it('renders an by default', () => { expect(render().type).toEqual('a') }) + + it('should support `className` on the outermost element', () => { + const Element = () => + const FeatureFlagElement = () => { + return ( + + + + ) + } + expect(HTMLRender().container.firstChild).toHaveClass('test-class-name') + expect(HTMLRender().container.firstChild).toHaveClass('test-class-name') + }) }) From b764fa31a8721b50a970b2a92806d7c6b62b34ce Mon Sep 17 00:00:00 2001 From: Josh Black Date: Tue, 29 Oct 2024 12:59:36 -0500 Subject: [PATCH 08/11] refactor: update usage for forwardRef --- packages/react/src/BranchName/BranchName.tsx | 30 +++++++++----- .../__tests__/BranchName.types.test.tsx | 40 +++++++++++++++++++ packages/react/src/utils/fixedForwardRef.ts | 10 ----- 3 files changed, 60 insertions(+), 20 deletions(-) delete mode 100644 packages/react/src/utils/fixedForwardRef.ts diff --git a/packages/react/src/BranchName/BranchName.tsx b/packages/react/src/BranchName/BranchName.tsx index ca38f1836fd..ec6fd45cc7c 100644 --- a/packages/react/src/BranchName/BranchName.tsx +++ b/packages/react/src/BranchName/BranchName.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, {type ForwardedRef} from 'react' import {clsx} from 'clsx' import styled from 'styled-components' import {get} from '../constants' @@ -7,7 +7,6 @@ import sx from '../sx' import {useFeatureFlag} from '../FeatureFlags' import Box from '../Box' import classes from './BranchName.module.css' -import {forwardRef} from '../utils/fixedForwardRef' const StyledBranchName = styled.a` display: inline-block; @@ -29,14 +28,11 @@ type BranchNameProps = { } & DistributiveOmit, 'as'> & SxProp -type DistributiveOmit = T extends any ? Omit : never - -const BranchName = forwardRef(function BranchName( - props: BranchNameProps, - ref: React.ForwardedRef, -) { +// eslint-disable-next-line @typescript-eslint/no-explicit-any +function UnwrappedBranchName(props: BranchNameProps, ref: ForwardedRef) { const {as: BaseComponent = 'a', className, children, sx, ...rest} = props const enabled = useFeatureFlag('primer_react_css_modules_team') + if (enabled) { if (sx) { return ( @@ -45,18 +41,32 @@ const BranchName = forwardRef(function BranchName( ) } + return ( {children} ) } + return ( - + {children} ) -}) +} + +// eslint-disable-next-line @typescript-eslint/ban-types +type FixedForwardRef = ( + render: (props: P, ref: React.Ref) => React.ReactNode, +) => (props: P & React.RefAttributes) => React.ReactNode + +const fixedForwardRef = React.forwardRef as FixedForwardRef + +// eslint-disable-next-line @typescript-eslint/no-explicit-any +type DistributiveOmit = T extends any ? Omit : never + +const BranchName = fixedForwardRef(UnwrappedBranchName) export type {BranchNameProps} export default BranchName diff --git a/packages/react/src/BranchName/__tests__/BranchName.types.test.tsx b/packages/react/src/BranchName/__tests__/BranchName.types.test.tsx index 35330c2da72..4b7db3d4ba7 100644 --- a/packages/react/src/BranchName/__tests__/BranchName.types.test.tsx +++ b/packages/react/src/BranchName/__tests__/BranchName.types.test.tsx @@ -9,3 +9,43 @@ export function shouldNotAcceptSystemProps() { // @ts-expect-error system props should not be accepted return } + +export function shouldAcceptAs() { + return ( + { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + type test = Expect>> + }} + /> + ) +} + +export function defaultAsIsAnchor() { + return ( + { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + type test = Expect>> + }} + /> + ) +} + +export function ShouldAcceptRef() { + const ref = React.useRef(null) + return ( + { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + type test = Expect>> + }} + /> + ) +} + +type Expect = T +type Equal = (() => T extends X ? 1 : 2) extends () => T extends Y ? 1 : 2 ? true : false diff --git a/packages/react/src/utils/fixedForwardRef.ts b/packages/react/src/utils/fixedForwardRef.ts deleted file mode 100644 index 61a26632bb5..00000000000 --- a/packages/react/src/utils/fixedForwardRef.ts +++ /dev/null @@ -1,10 +0,0 @@ -import {forwardRef} from 'react' -import type React from 'react' - -export type FixedForwardRef = ( - render: (props: P, ref: React.Ref) => React.ReactNode, -) => (props: P & React.RefAttributes) => React.ReactNode - -const fixedForwardRef = forwardRef as FixedForwardRef - -export {fixedForwardRef as forwardRef} From 6f430777d3acecef320e233ed30d551648ddf4ca Mon Sep 17 00:00:00 2001 From: Josh Black Date: Tue, 29 Oct 2024 13:55:50 -0500 Subject: [PATCH 09/11] chore: update fallthrough to use as prop --- packages/react/src/BranchName/BranchName.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/react/src/BranchName/BranchName.tsx b/packages/react/src/BranchName/BranchName.tsx index ec6fd45cc7c..07910a0fecb 100644 --- a/packages/react/src/BranchName/BranchName.tsx +++ b/packages/react/src/BranchName/BranchName.tsx @@ -29,7 +29,7 @@ type BranchNameProps = { SxProp // eslint-disable-next-line @typescript-eslint/no-explicit-any -function UnwrappedBranchName(props: BranchNameProps, ref: ForwardedRef) { +function BranchName(props: BranchNameProps, ref: ForwardedRef) { const {as: BaseComponent = 'a', className, children, sx, ...rest} = props const enabled = useFeatureFlag('primer_react_css_modules_team') @@ -50,7 +50,7 @@ function UnwrappedBranchName(props: BranchNameProp } return ( - + {children} ) @@ -66,7 +66,5 @@ const fixedForwardRef = React.forwardRef as FixedForwardRef // eslint-disable-next-line @typescript-eslint/no-explicit-any type DistributiveOmit = T extends any ? Omit : never -const BranchName = fixedForwardRef(UnwrappedBranchName) - export type {BranchNameProps} -export default BranchName +export default fixedForwardRef(BranchName) From 6c5db483f9f8a7ef6911c478caf956b69e49c7ad Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Wed, 30 Oct 2024 09:53:22 -0700 Subject: [PATCH 10/11] Update BranchName.displayname --- packages/react/src/BranchName/BranchName.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react/src/BranchName/BranchName.tsx b/packages/react/src/BranchName/BranchName.tsx index 07910a0fecb..4b6d7697c9f 100644 --- a/packages/react/src/BranchName/BranchName.tsx +++ b/packages/react/src/BranchName/BranchName.tsx @@ -66,5 +66,7 @@ const fixedForwardRef = React.forwardRef as FixedForwardRef // eslint-disable-next-line @typescript-eslint/no-explicit-any type DistributiveOmit = T extends any ? Omit : never +BranchName.displayName = 'BranchName' + export type {BranchNameProps} export default fixedForwardRef(BranchName) From faadbfe5c5d1a2468a2f6f58dd295d44cd1a3c44 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Thu, 31 Oct 2024 13:01:21 -0500 Subject: [PATCH 11/11] test: add option to skip display name check --- .../react/src/BranchName/__tests__/BranchName.test.tsx | 7 ++++++- packages/react/src/utils/testing.tsx | 9 ++++++--- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/packages/react/src/BranchName/__tests__/BranchName.test.tsx b/packages/react/src/BranchName/__tests__/BranchName.test.tsx index 3687f591194..4a9445e1421 100644 --- a/packages/react/src/BranchName/__tests__/BranchName.test.tsx +++ b/packages/react/src/BranchName/__tests__/BranchName.test.tsx @@ -6,7 +6,12 @@ import axe from 'axe-core' import {FeatureFlags} from '../../FeatureFlags' describe('BranchName', () => { - behavesAsComponent({Component: BranchName}) + behavesAsComponent({ + Component: BranchName, + options: { + skipDisplayName: true, + }, + }) checkExports('BranchName', { default: BranchName, diff --git a/packages/react/src/utils/testing.tsx b/packages/react/src/utils/testing.tsx index 5f5f1caa257..5699aa85ca1 100644 --- a/packages/react/src/utils/testing.tsx +++ b/packages/react/src/utils/testing.tsx @@ -193,6 +193,7 @@ export function unloadCSS(path: string) { interface Options { skipAs?: boolean skipSx?: boolean + skipDisplayName?: boolean } interface BehavesAsComponent { @@ -221,9 +222,11 @@ export function behavesAsComponent({Component, toRender, options}: BehavesAsComp }) } - it('sets a valid displayName', () => { - expect(Component.displayName).toMatch(COMPONENT_DISPLAY_NAME_REGEX) - }) + if (!options.skipDisplayName) { + it('sets a valid displayName', () => { + expect(Component.displayName).toMatch(COMPONENT_DISPLAY_NAME_REGEX) + }) + } } // eslint-disable-next-line @typescript-eslint/no-explicit-any