React redirect unit test not rendering expected dom

I am trying to unit test (with React Testing Library) that my redirect occurs as expected and as actually occurs in practise, however it doesn’t seem that anything is actually being rendered in my test…


App.js

// I set up a test route to get this working before I point it at the real page

<Route exact path={`${process.env.PUBLIC_URL}/blah`} render={() => (
    <div data-testid="my-test">THIS IS A TEST</div>
)}/>

MyComponent.jsx

// I have forced this component to do the redirect for testing purposes
...
return (
    <BrowserRouter>
        <Redirect to={`${process.env.PUBLIC_URL}/blah`} />
    </BrowserRouter>
);

I found that not wrapping my <Redirect> in <BrowserRouter> would yield the error

You should not use <Redirect> outside a <Router>

Test.js

it('should redirect', async () => {
    const state = configState(); // <---- Set custom initial state of component
    const store = configureStore();

    rendered = render(
        <Provider store={store(state)}>
            <ForgotPasswordNewPasswordJourney />
        </Provider>
    );

    // check that the content changed to the new page
    expect(rendered.getByText("THIS IS A TEST")).toBeTruthy();
});

The result of this test is:

TestingLibraryElementError: Unable to find an element with the text: THIS IS A TEST. 
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.

<body>
   <div />
   <div />
</body>

      116 | 
      117 |         // check that the content changed to the new page
    > 118 |         expect(rendered.getByText("THIS IS A TEST")).toBeTruthy();
          |                         ^
      119 |     });
      120 | 
      121 | 

Note: I get this error also when I wrap my test render with a <BrowserRouter> also:

<Provider store={store(state)}>
    <BrowserRouter>
         <ForgotPasswordNewPasswordJourney />
    </BrowserRouter>
</Provider>

Peculiar behaviour…
I did read online that maybe it was an async/await issue as the redirect will take time to perform etc. So I saw that using waitFor may be an option, and when performing:

waitFor(() => expect(rendered.getByText("THIS IS A TEST")).toBeTruthy());

this actually passed the test to my surprise… However, if I then put a nonsense string in the getByText field, this would also pass my test… So it seems that this also isn’t the answer.

What am I doing wrong?

47 thoughts on “React redirect unit test not rendering expected dom”

  1. Pingback: keto connect
  2. First of all I would like to say terrific blog! I had a quick question which I’d
    like to ask if you don’t mind. I was interested to find out how
    you center yourself and clear your head prior to writing.
    I’ve had trouble clearing my mind in getting my ideas out there.

    I do take pleasure in writing however it just seems like
    the first 10 to 15 minutes tend to be wasted just trying to figure out how to begin. Any ideas
    or tips? Many thanks!

    Reply
  3. Hi there, i read your blog from time to time and i own a similar one and i was just wondering
    if you get a lot of spam remarks? If so how do
    you protect against it, any plugin or anything you
    can advise? I get so much lately it’s driving me insane so any assistance is
    very much appreciated.

    Reply
  4. Appreciating the time and energy you put into your website and
    in depth information you present. It’s nice
    to come across a blog every once in a while that isn’t the same
    old rehashed material. Fantastic read! I’ve bookmarked your site and I’m
    adding your RSS feeds to my Google account.

    Reply
  5. I have been surfing online greater than 3 hours these days, yet I by no
    means found any fascinating article like yours.

    It is beautiful price sufficient for me. Personally, if all web owners and bloggers made
    just right content as you probably did, the net shall be much more useful than ever before.

    Reply
  6. I really love your website.. Great colors & theme.
    Did you make this site yourself? Please reply back as I’m attempting to create my very own website
    and would love to learn where you got this from or just what
    the theme is called. Thank you!

    Reply
  7. Howdy, I do believe your blog may be having web browser compatibility issues.
    When I take a look at your blog in Safari, it looks fine however when opening in IE, it’s got some overlapping
    issues. I just wanted to give you a quick heads up!
    Besides that, excellent blog! quest bars http://bit.ly/3C2tkMR quest bars

    Reply
  8. Pingback: gay dating quiz

Leave a Comment