はじめに

Jest で実施している React のフロントエンドテストがローカルではすべてパスするのに Github Actions だと失敗する現象に遭遇しました。

エラーをもとに設定などを変更してもうまくいかなかったのですが、修正することができたので記事にします。

失敗しているときのメッセージは下記の通りです。

FAIL src/components/pages/Login.test.tsx
  ● Test suite failed to run

    src/components/atoms/PrimaryButton.tsx:1:24 - error TS2307: Cannot find module '@chakra-ui/react/button' or its corresponding type declarations.

    1 import { Button } from "@chakra-ui/react/button";
                             ~~~~~~~~~~~~~~~~~~~~~~~~~

環境

windows11
React v18
Chakra UI V3
ASP.Net Core

原因

Chakra UIをでは V ３から使用する際にコンポーネントを定義されたスニペットとして追加する事ができます。ソースコードで参照している先がスニペットではなくChakra UIの物を参照していました。

ローカルに存在するスニペットを参照するように修正したところ Github Actions 上で正常に動くようになりました。

PrimaryButton.tsx

import { FC } from "react";
-import { Button } from "@chakra-ui/react/button";
+import { Button } from "../ui/button";

type Props = {
  label: string;
  onClick: () => void;
};

export const PrimaryButton: FC<Props> = (props) => {
  const { label, onClick } = props;

  return (
    <Button
      bg={"teal"}
      size="md"
      onClick={onClick}>
      {label}
    </Button>
  );
};

おわりに

ボタンをコンポーネントとして分割していたため修正箇所が１か所で済んだため、再利用性が重要であることを再確認しました。