【Chakra UI v3 × jest】テスト時のToggleTipの型エラーの解消方法①（Type '{ children: ArkPopover.RootBaseProps; asChild: true; }' is not assignable to type 'IntrinsicAttributes & PopoverTriggerProps & RefAttributes<HTMLButtonElement>'.）

はじめに

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

今回はChakra UI v3のDataListを使用した際に、テスト実行時に発生したエラーの解消方法について記事にまとめました。

問題

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

エラー内容

 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 } from '@chakra-ui/react';
+ import { Popover as ChakraPopover, IconButton, Portal, type PopoverTriggerProps } from '@chakra-ui/react'; // PopoverTriggerProps型をインポート
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;

+ // popoverTriggerPropsを型「PopoverTriggerProps」として定義
+ const popoverTriggerProps: PopoverTriggerProps = {
+   children: children,
+   asChild: true,
+ };

  return (
    <ChakraPopover.Root {...rest} positioning={{ ...rest.positioning, gutter: 4 }}>
-     <ChakraPopover.Trigger asChild>{children}</ChakraPopover.Trigger>
+     <ChakraPopover.Trigger {...popoverTriggerProps} /> {/* 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.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>
  );
});

おわりに

これで1つ目のエラーが解消されました。

続けて、2つ目のエラーについても別の記事で解消していきます。

参考