How does reloadDocument works?

[bhavin-a]

Hi everyone, I was trying to add UTs with jest and react-router-dom-v5-compat which is using a <Link reloadDocument /> component with reloadDocument

When I add a simple test which routes to a particular URL, it fails when the reloadDocument is used but passes when NOT used. I am not sure how this is working internally and how is it affected the UTs. Though, the app is working as expected.

I went through the actual code of v5-compat where, the UT is testing for event.preventDefault to be false but even that test ifs not able to check the actual content of the page. I referred this

Wanted to know, is it even possible to add a UT with reloadDocument flag enabled? Possible to help how?

Thanks in advance!!!

[pruett]

I'm running into a very similar issue where the presence of a <Link> component with the reloadDocument prop throws the following in react-testing-library/jest:

Warning: React does not recognize the `%s` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `%s` instead. If you accidentally passed it from a parent component, remove it from the DOM element.%s

[pruett]

Ah, digging a bit deeper, it looks like the issue I was facing was the way our team was mocking remix. We were mocking Remix's <Link> component by returning:

  remix.Link = function FakeLink({ to, ...props }) {
    return React.createElement('a', {
      href: to,
      ...props, // <- If reloadDocument is present, this breaks
    });
  };

The solution is to simply grab reloadDocument and not pass it through to the createElement call