【Chakra UI v3 × jest】テスト時のToggleTipの型エラーの解消方法②（Type '{ children: any[]; width: string; px: string; py: string; textStyle: string; rounded: string; ref: ForwardedRef<HTMLDivElement>; }' is not assignable to type 'IntrinsicAttributes & PopoverContentProps~）

はじめに

お疲れ様です、りつです。

前回に引き続き、Chakra UI v3のDataListを使用した際のテスト実行時のエラーについてです。

前回の記事は以下です。

問題

テスト実行時に以下のエラーが発生しました。
この記事では、2つ目のエラーについて解消していきます。

エラー内容

 FAIL  src/__tests__/sampleComponent.spec.tsx
  ● Test suite failed to run

    src/components/ui/toggle-tip.tsx:28:10 - error TS2322: Type '{ children: ArkPopover.RootBaseProps; asChild: true; }' is not assignable to type 'IntrinsicAttributes & PopoverTriggerProps & RefAttributes<HTMLButtonElement>'.
      Property 'children' does not exist on type 'IntrinsicAttributes & PopoverTriggerProps & RefAttributes<HTMLButtonElement>'.

    28         <ChakraPopover.Trigger asChild>{children}</ChakraPopover.Trigger>
                ~~~~~~~~~~~~~~~~~~~~~
    src/components/ui/toggle-tip.tsx:31:14 - error TS2322: Type '{ children: any[]; width: string; px: string; py: string; textStyle: string; rounded: string; ref: ForwardedRef<HTMLDivElement>; }' is not assignable to type 'IntrinsicAttributes & PopoverContentProps & RefAttributes<HTMLDivElement>'.
      Property 'children' does not exist on type 'IntrinsicAttributes & PopoverContentProps & RefAttributes<HTMLDivElement>'.

    31             <ChakraPopover.Content
                    ~~~~~~~~~~~~~~~~~~~~~

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        4.391 s
Ran all test suites.

参考ファイル

src/App.tsx

import { Router } from "@/router/Router";

function App() {
  return (
    <>
      <Router />
    </>
  );
}

export default App;

src/components/pages/Home.tsx

import React, { memo } from 'react';

export const Home: React.FC = memo(() => {
  return <p data-testid="title">Homeページです</p>;
});

src/__tests__/sampleComponent.spec.tsx

import App from '../App';
import { render, screen } from '@testing-library/react';
import { ChakraProvider, defaultSystem } from '@chakra-ui/react';
import { BrowserRouter } from 'react-router';

describe('App', () => {
  test('タイトルがあること', async () => {
    render(
      <BrowserRouter>
        <ChakraProvider value={defaultSystem}>
          <App />
        </ChakraProvider>
      </BrowserRouter>
    );
    const title = screen.getByTestId('title');
    expect(title).toBeInTheDocument();
  });
});

解決方法

src/components/ui/toggle-tip.tsxを以下のように修正します。

src/components/ui/toggle-tip.tsxは、DataListを使用するために以下のコマンドを実行した際に生成されたファイルです。

npx @chakra-ui/cli snippet add data-list

src/components/ui/toggle-tip.tsx

- import { Popover as ChakraPopover, IconButton, Portal, type PopoverTriggerProps } from 
+ import { Popover as ChakraPopover, IconButton, Portal, type PopoverTriggerProps, type PopoverContentProps } from '@chakra-ui/react'; // PopoverContentProps型をインポート
import * as React from 'react';
import { HiOutlineInformationCircle } from 'react-icons/hi';

export interface ToggleTipProps extends ChakraPopover.RootProps {
  showArrow?: boolean;
  portalled?: boolean;
  portalRef?: React.RefObject<HTMLElement>;
  content?: React.ReactNode;
}

export const ToggleTip = React.forwardRef<HTMLDivElement, ToggleTipProps>(function ToggleTip(props, ref) {
  const { showArrow, children, portalled = true, content, portalRef, ...rest } = props;

  const popoverTriggerProps: PopoverTriggerProps = {
    children: children,
    asChild: true,
  };

+ // popoverContentPropsを型「PopoverContentProps」として定義
+ const popoverContentProps: PopoverContentProps = {
+   width: 'auto',
+   px: '2',
+   py: '1',
+   textStyle: 'xs',
+   rounded: 'sm',
+   children: (
+     <>
+       {showArrow && (
+         <ChakraPopover.Arrow>
+           <ChakraPopover.ArrowTip />
+         </ChakraPopover.Arrow>
+       )}
+       {content}
+     </>
+   ),
+ };

  return (
    <ChakraPopover.Root {...rest} positioning={{ ...rest.positioning, gutter: 4 }}>
      <ChakraPopover.Trigger {...popoverTriggerProps} />
      <Portal disabled={!portalled} container={portalRef}>
        <ChakraPopover.Positioner>
-         <ChakraPopover.Content width="auto" px="2" py="1" textStyle="xs" rounded="sm" ref={ref}>
-          {showArrow && (
-             <ChakraPopover.Arrow>
-               <ChakraPopover.ArrowTip />
-             </ChakraPopover.Arrow>
-           )}
-           {content}
-         </ChakraPopover.Content>
+         <ChakraPopover.Content {...popoverContentProps} ref={ref} /> {/* popoverContentPropsに置き換え */}
        </ChakraPopover.Positioner>
      </Portal>
    </ChakraPopover.Root>
  );
});

export const InfoTip = React.forwardRef<HTMLDivElement, Partial<ToggleTipProps>>(function InfoTip(props, ref) {
  const { children, ...rest } = props;
  return (
    <ToggleTip content={children} {...rest} ref={ref}>
      <IconButton variant="ghost" aria-label="info" size="2xs" colorPalette="gray">
        <HiOutlineInformationCircle />
      </IconButton>
    </ToggleTip>
  );
});

おわりに

上記の対応により無事テストが通るようになりました。

過去にChakra UIの別のコンポーネントでもエラーが発生しておりましたので、DialogやToastを利用していらっしゃる方は以下の一連の記事もご参照ください。

参考