How to test dynamic page titles?

Question

I'm using react-helmet and change the documents page title depending on some conditions.

How can I test that behaviour with react-testing-library?

I tried something like

const { debug } = render(<TitleChangingComponent title="Test" />, {
    container: document.head,
});
debug();

But it just shows me an empty in the debug output. Additionally I'm not 100% sure if this is related to react-testing-library in general or jsdom (I'm using Jest for my tests).

I think it has more to do with `react-helmet` and the way that it writes to the DOM. — linuxdan, Apr 09 '20 at 00:01

score -2 · Answer 1 · answered Apr 15 '19 at 20:13

-2

I wouldn't use react-testing-library for this.

I would test this in an E2E test e.g. with Cypress.

cy.title().should('eq', '<your-title>')

Opinionated:

It is best practice to test your components and pure logic using unit tests and side effects as well as user interaction using end to end tests.

answered Apr 15 '19 at 20:13

J. Hesters

13,117
31
133
249

7

This doesn't actually answer the question. – linuxdan Apr 08 '20 at 23:54
I'd be more interested even in the why to why it doesn't work in jest – buddyp450 Jul 20 '22 at 21:18

How to test dynamic page titles?

1 Answers1