デフォルトスタイルでのlabelを使っているコンポーネントにrequiredを指定した際のテストについて

[Qs-F]

FUIでは後方互換性担保のため、labelにstringを渡すとデフォルトスタイルのlabelを描画するコンポーネントがある。(例: TextField)

これにrequiredを指定している場合、text-negative-dark-default で * をlabelに示すスタイルをデフォルトとしている。

この場合、labelに * が含まれている関係で、テストで

render(<TextField label="textfield" required />);
expect(screen.getByRole('textbox', { name: 'textfield' })).toBeInTheDocument();

とすると要素が見つからないとして落ちてしまう。これを防ぐにはnameを 'textfield *'にする必要がある。
以下に動く例を示す。

render(<TextField label="textfield" required />);
expect(screen.getByRole('textbox', { name: 'textfield *' })).toBeInTheDocument();