【トラブルシュート】Jest でテスト対象コンポーネントが読み込んでいる CSS の import エラーが発生

はじめに

以下の Header コンポーネントのテストを書いて、いざ実行したところ、CSS の import 部分でエラーになってしまったのでその対応をメモしました。

 SyntaxError: Unexpected token '.'

    > 1 | import "./css/component.css";
        | ^
      2 |
      3 | type RibbonType = {
      4 |   caption: string;

 

テストコード

Header.test.tsx

import { fireEvent, render, screen } from "@testing-library/react";

import Header from "../Header";

describe("Headerコンポーネントテスト", () => {

beforeEach(() => {

render(

<Header

trailingCaption="test caption"

trailingTitle="test title"

fontStyle="test style"

/>

);

});

test("Headerコンポーネントが描画されること", () => {

const headerElement = screen.getByText("Habbit Tracker");

expect(headerElement).toBeInTheDocument();

});

});

テスト対象コード

Header.tsx

import Ribbon from "./Ribbon";

type HeaderType = {

trailingCaption: string;

trailingTitle: string;

fontStyle: string;

};

export default function Header({

trailingCaption,

trailingTitle,

fontStyle,

}: HeaderType) {

return (

<div className="flex justify-between">

<div className="text-5xl text-pink-400">Habbit Tracker</div>

<div className={`${fontStyle} w-64`}>

<Ribbon caption={trailingCaption} title={trailingTitle} />

</div>

</div>

);

}

 

テスト対象コードの子コンポーネント（CSS読み込み部分で今回のエラーが発生）

Ribbon.tsx

import "./css/component.css";

type RibbonType = {

caption: string;

title: string;

};

export default function Ribbon({ caption, title }: RibbonType) {

return (

<div className="bg-pink-300 p-2 text-lg ribbon-cut w-64 h-16 shadow">

<div>{caption}</div>

<div className="text-2xl text-center">{title}</div>

</div>

);

}

 

原因について

Jest が上記箇所でCSSを読み込む際、JavaScript として処理しようとしてしまうために発生しているエラーのようです。

下記の参考サイトでは CSS モック用の JS ファイルを用意するやり方や、jest-transform-stub を使うやり方が紹介されていますが、私のほうでは identity-obj-proxy を使った CSS のモック化のやり方が試せたのでこちらの方法で対処法を記載します。

 

エラー対応

identity-obj-proxy パッケージをインストールする

npm install --save-dev identity-obj-proxy

 

モック設定を追加する

jest.config.js

module.exports = {
    moduleFileExtensions: ["ts", "tsx", "js", "jsx"], // 拡張子を追加
・・（略）
  moduleNameMapper: {
    "\\.(css|less|scss|sass)$": "identity-obj-proxy",
  },
};

• css, less, scss, sass これらの拡張子のファイルに対して、identity-obj-proxy を使うように指定しています
• identity-obj-proxy により、該当のファイルをモックすることができます

 

この状態で再度テストを実行してみると、下記のように無事テストがPASSすることを確認しました。

npm run test

> [email protected] test
> jest

 PASS  src/components/__tests__/Button.test.tsx
 PASS  src/components/__tests__/Header.test.tsx

Test Suites: 2 passed, 2 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        0.723 s, estimated 1 s

 

終わりに

CSS読み込みでエラーに遭遇するとは思っていませんでしたが、そういった場面でも対応できるパッケージが提供されていることを知りました。

調べている中でほかにも対応法があることもわかりました。

Jest のユニットテスト入門したばかりですが、ほかにもエラーにハマったらまた何か記事にしたいと思います。

 

参考にしたサイト

qiita.com

blog.kimizuka.org