web-dev-qa-db-ja.com

react-testing-libraryのidで要素を検索

react-testing-libarary を使用して、reactアプリケーションをテストしています。何らかの理由で、data-testidではなくidで要素を見つけることができる必要があります。ドキュメントでこれを達成する方法はありません。

これを達成する方法はありますか？

私はレンダリングされた出力を次のようにしています：

const dom = render(<App />);

私はラインで何かを探しています：

const input = dom.getElemenById('firstinput');
//or 
const input = dom.getById('firstinput');
reactjsreact-testing-library
7
aks

これを行う方法を見つけました。

import App from './App';
import { render, queryByAttribute } from 'react-testing-library';

const getById = queryByAttribute.bind(null, 'id');

const dom = render(<App />);
const table = getById(dom.container, 'directory-table');

これがお役に立てば幸いです。

3
aks

コンテナ としてDOMノード自体があるように見えます。したがって、それで.querySelector('#firstinput')を呼び出すことができるはずです。

10
Ali BARIN

これを行うには2つの方法があります

  1. 単にcontainer.getElementById('id')を使用してください。最後に、ヘルパーはすべて、このようなクエリを内部で実行しています。
  2. カスタムクエリが必要な場合は、カスタムレンダリングを作成できます。詳細についてはドキュメントを確認してください https://github.com/kentcdodds/react-testing-library#getbytestidtext-textmatch-htmlelement

最後に、idで要素を探すのを避けることができれば、それは良いことです。

0
Giorgio Polvara - Gpx