Estoy tratando de escribir algunas pruebas para dos listas de usuarios (usuarios y miembros, marcado idéntico, contenido semántico diferente) en React Testing Library. Los detalles de cada usuario están dentro de un elemento span .

Tengo este árbol DOM:

 <div> <span> <div> <b>Text 1</b> </div> <div> <!-- other elements here --> </div> </span> </div> <div> <span> <div> <b>Text 2</b> </div> <div> <!-- other elements here --> </div> </span> </div> <div> <span> <div> <b>Text 3</b> </div> <div> <!-- other elements here --> </div> </span> </div>

Quiero hacer coincidir el elemento span (porque maneja la lógica onClick ) en función del texto dentro del elemento secundario b (porque contiene el nombre y el apellido del usuario).

Intenté hacerlo de esta manera:

 const getUsersLists = (doc) => ({ usersList: doc.querySelector('.users-users-list'), membersList: doc.querySelector('.members-users-list'), }); const getUser = (name, list) => ( screen.findByText(name), { selector: 'span' }, { container: list }) ); test('users exist', () => { const { usersList } = getUsersLists(document); const sampleUser = await getUser('Text 1', usersList); expect(sampleUser).toBeInTheDocument(); });

El problema:

Esos comparadores encuentran con éxito el Text 1 si elimino el objeto de opciones { selector: 'span' } del método getUser . Tan pronto como le digo a RTL que busque un elemento de span , no puede encontrar nada.

También quiero evitar más referencias a document.querySelector y class/ID (incluido data-testid ).