Testing-libraryで変数を正規表現として使用する方法

目次

Testing-libraryで変数を正規表現として使用する方法

@testing-library/react は、Reactのコンポーネントをテストするための人気のあるライブラリです。
特に、DOMの要素をテキストベースで照合するgetByTextクエリは非常に便利です。
しかし、文字列を変数として正規表現として使いたい場合、どうすればよいのでしょうか？

答えは、JavaScriptの RegExp コンストラクタを使用することです。

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

// ここであなたのコンポーネントをレンダリングします。

const text = "hoge.*aaa";
expect(screen.getByText(new RegExp(text))).toBeInTheDocument();

上記のコードでは、text 変数の内容を RegExp コンストラクタを通じて正規表現として getByText に渡しています。
この方法で、DOMの要素を動的なテキスト内容で照合することができます。

この技術は、テキストが動的であるか、複数の可能性が考えられる場合など、様々なテストシナリオで役立ちます。
テストの堅牢性と柔軟性を向上させるために、この方法を活用してください。