CSSモジュールを使用したVitestのテスト

まず、Vitestをインストールします。以下のコマンドを使用して、プロジェクトにVitestを追加します。

npm install --save-dev vitest

Vitestを使用するための環境が整ったら、次のステップはCSSモジュールをセットアップすることです。CSSモジュールを使用すると、クラス名の衝突を回避し、コンポーネントごとにスタイルをカプセル化することができます。

まず、プロジェクトにCSSモジュールを有効にするための設定を追加します。一般的な方法は、Webpackを使用してCSSモジュールを処理することです。以下は、Webpackの設定例です。

// webpack.config.js
module.exports = {
  // ...他の設定
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true, // CSSモジュールを有効にする
            },
          },
        ],
      },
    ],
  },
};

この設定では、.cssファイルをインポートすると、そのスタイルシートはCSSモジュールとして処理されます。

次に、テストファイルを作成してVitestで実行する方法を見てみましょう。以下は、単純なReactコンポーネントの例です。

// Button.js
import React from 'react';
import styles from './Button.css';
const Button = ({ onClick, children }) => {
  return (
    <button className={styles.button} onClick={onClick}>
      {children}
    </button>
  );
};
export default Button;

この例では、Buttonコンポーネントにstyles.buttonというCSSモジュールのクラス名を適用しています。

次に、テストファイルを作成します。

// Button.test.js
import React from 'react';
import { render, screen } from 'vitest';
import Button from './Button';
test('Button renders correctly', () => {
  render(<Button>Click me</Button>);
  const buttonElement = screen.getByText('Click me');
  expect(buttonElement).toBeInTheDocument();
});

このテストファイルでは、Vitestのrender関数を使用してButtonコンポーネントをレンダリングし、その結果を検証しています。

これで、CSSモジュールを使用したVitestのテストがセットアップされました。テストを実行するには、以下のコマンドを使用します。

npx vitest --watch

これにより、テストランナーが起動し、変更があるたびにテストが再実行されます。

以上が、CSSモジュールを使用したVitestのテストの基本的なセットアップ方法です。必要に応じて、さまざまなテストケースやコンポーネントに対して同様の手順を実行できます。