How to query by text string which contains html tags using React Testing Library? - reactjs

Question

Current Working Solution
Using this html:
<p data-testid="foo">Name: <strong>Bob</strong> <em>(special guest)</em></p>
I can use the React Testing Library getByTestId method to find the textContent:
expect(getByTestId('foo').textContent).toEqual('Name: Bob (special guest)')
Is there a better way?
I would like to simply use this html:
<p>Name: <strong>Bob</strong> <em>(special guest)</em></p>
And use React Testing Library's getByText method like this:
expect(getByText('Name: Bob (special guest)')).toBeTruthy()
But this does not work.
So, the question…
Is there a simpler way to use React Testing Library to find strings of text content with the tags striped out?

Answer 1

Update 2
Having used this many times, I've created a helper. Below is an example test using this helper.
Test helper:
// withMarkup.ts
import { MatcherFunction } from '#testing-library/react'
type Query = (f: MatcherFunction) => HTMLElement
const withMarkup = (query: Query) => (text: string): HTMLElement =>
query((content: string, node: HTMLElement) => {
const hasText = (node: HTMLElement) => node.textContent === text
const childrenDontHaveText = Array.from(node.children).every(
child => !hasText(child as HTMLElement)
)
return hasText(node) && childrenDontHaveText
})
export default withMarkup
Test:
// app.test.tsx
import { render } from '#testing-library/react'
import App from './App'
import withMarkup from '../test/helpers/withMarkup'
it('tests foo and bar', () => {
const { getByText } = render(<App />)
const getByTextWithMarkup = withMarkup(getByText)
getByTextWithMarkup('Name: Bob (special guest)')
})
Update 1
Here is an example where a new matcher getByTextWithMarkup is created. Note that this function extends getByText in a test, thus it must be defined there. (Sure the function could be updated to accept getByText as a parameter.)
import { render } from "#testing-library/react";
import "jest-dom/extend-expect";
test("pass functions to matchers", () => {
const Hello = () => (
<div>
Hello <span>world</span>
</div>
);
const { getByText } = render(<Hello />);
const getByTextWithMarkup = (text: string) => {
getByText((content, node) => {
const hasText = (node: HTMLElement) => node.textContent === text
const childrenDontHaveText = Array.from(node.children).every(
child => !hasText(child as HTMLElement)
)
return hasText(node) && childrenDontHaveText
})
}
getByTextWithMarkup('Hello world')
Here is a solid answer from the 4th of Five Things You (Probably) Didn't Know About Testing Library from Giorgio Polvara's Blog:
Queries accept functions too
You have probably seen an error like this one:
Unable to find an element with the text: Hello world.
This could be because the text is broken up by multiple elements.
In this case, you can provide a function for your text
matcher to make your matcher more flexible.
Usually, it happens because your HTML looks like this:
<div>Hello <span>world</span></div>
The solution is contained inside the error message: "[...] you can provide a function for your text matcher [...]".
What's that all about? It turns out matchers accept strings, regular expressions or functions.
The function gets called for each node you're rendering. It receives two arguments: the node's content and the node itself. All you have to do is to return true or false depending on if the node is the one you want.
An example will clarify it:
import { render } from "#testing-library/react";
import "jest-dom/extend-expect";
test("pass functions to matchers", () => {
const Hello = () => (
<div>
Hello <span>world</span>
</div>
);
const { getByText } = render(<Hello />);
// These won't match
// getByText("Hello world");
// getByText(/Hello world/);
getByText((content, node) => {
const hasText = node => node.textContent === "Hello world";
const nodeHasText = hasText(node);
const childrenDontHaveText = Array.from(node.children).every(
child => !hasText(child)
);
return nodeHasText && childrenDontHaveText;
});
});
We're ignoring the content argument because in this case, it will either be "Hello", "world" or an empty string.
What we are checking instead is that the current node has the right textContent. hasText is a little helper function to do that. I declared it to keep things clean.
That's not all though. Our div is not the only node with the text we're looking for. For example, body in this case has the same text. To avoid returning more nodes than needed we are making sure that none of the children has the same text as its parent. In this way we're making sure that the node we're returning is the smallest—in other words the one closes to the bottom of our DOM tree.
Read the rest of Five Things You (Probably) Didn't Know About Testing Library

Answer 2

If you are using testing-library/jest-dom in your project. You can also use toHaveTextContent.
expect(getByTestId('foo')).toHaveTextContent('Name: Bob (special guest)')
if you need a partial match, you can also use regex search patterns
expect(getByTestId('foo')).toHaveTextContent(/Name: Bob/)
Here's a link to the package

Answer 3

For substring matching, you can pass { exact: false }:
https://testing-library.com/docs/dom-testing-library/api-queries#textmatch
const el = getByText('Name:', { exact: false })
expect(el.textContent).toEqual('Name: Bob (special guest)');

Answer 4

The existing answers are outdated. The new *ByRole query supports this:
getByRole('button', {name: 'Bob (special guest)'})

Answer 5

Update
The solution below works but for some cases, it might return more than one result. This is the correct implementation:
getByText((_, node) => {
const hasText = node => node.textContent === "Name: Bob (special guest)";
const nodeHasText = hasText(node);
const childrenDontHaveText = Array.from(node.children).every(
child => !hasText(child)
);
return nodeHasText && childrenDontHaveText;
});
You can pass a method to getbyText:
getByText((_, node) => node.textContent === 'Name: Bob (special guest)')
You could put the code into a helper function so you don't have to type it all the time:
const { getByText } = render(<App />)
const getByTextWithMarkup = (text) =>
getByText((_, node) => node.textContent === text)

Answer 6

To avoid matching multiple elements, for some use cases simply only returning elements that actually have text content themselves, filters out unwanted parents just fine:
expect(
// - content: text content of current element, without text of its children
// - element.textContent: content of current element plus its children
screen.getByText((content, element) => {
return content !== '' && element.textContent === 'Name: Bob (special guest)';
})
).toBeInTheDocument();
The above requires some content for the element one is testing, so works for:
<div>
<p>Name: <strong>Bob</strong> <em>(special guest)</em></p>
</div>
...but not if <p> has no text content of its own:
<div>
<p><em>Name: </em><strong>Bob</strong><em> (special guest)</em></p>
</div>
So, for a generic solution the other answers are surely better.

Answer 7

The other answers ended up in type errors or non-functional code at all. This worked for me.
Note: I'm using screen.* here
import React from 'react';
import { screen } from '#testing-library/react';
/**
* Preparation: generic function for markup
* matching which allows a customized
* /query/ function.
**/
namespace Helper {
type Query = (f: MatcherFunction) => HTMLElement
export const byTextWithMarkup = (query: Query, textWithMarkup: string) => {
return query((_: string, node: Element | null) => {
const hasText = (node: Element | null) => !!(node?.textContent === textWithMarkup);
const childrenDontHaveText = node ? Array.from(node.children).every(
child => !hasText(child as Element)
) : false;
return hasText(node) && childrenDontHaveText
})}
}
/**
* Functions you use in your test code.
**/
export class Jest {
static getByTextWithMarkup = (textWithMarkup: string) => Helper.byTextWithMarkup(screen.getByText, textWithMarkup);
static queryByTextWith = (textWithMarkup: string) => Helper.byTextWithMarkup(screen.queryByText, textWithMarkup);
}
Usage:
Jest.getByTextWithMarkup("hello world");
Jest.queryByTextWithMarkup("hello world");

Answer 8

Now you can use the 'toHaveTextContent' method for matching text with substrings or markup
for example
const { container } = render(
<Card name="Perro Loko" age="22" />,
);
expect(container).toHaveTextContent('Name: Perro Loko Age: 22');

Answer 9

getByText('Hello World'); // full string match
getByText('llo Worl', { exact: false }); // substring match
getByText('hello world', { exact: false }); // ignore case-sensitivity
source: https://testing-library.com/docs/react-testing-library/cheatsheet/#queries