SecurityError: replaceState cannot update history to a URL which differs in components other than in path, query, or fragment

Question

I am trying to test a react component using jest and enzyme. But whenever i try to mount the component, i am getting following error.

Error: Uncaught [SecurityError: replaceState cannot update history to a URL which differs in components other than in path, query, or fragment.]
      at reportException (node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
      at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:209:9)
      at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:119:9)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:82:17)
      at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:30:27)
      at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:157:21)
      at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:199:16)
      at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:256:31)
      at commitRoot (node_modules/react-dom/cjs/react-dom.development.js:17458:7)
      at completeRoot (node_modules/react-dom/cjs/react-dom.development.js:18912:3) SecurityError: replaceState cannot update history to a URL which differs in components other than in path, query, or fragment.
      at HistoryImpl._sharedPushAndReplaceState (node_modules/jsdom/lib/jsdom/living/window/History-impl.js:83:15)
      at HistoryImpl.replaceState (node_modules/jsdom/lib/jsdom/living/window/History-impl.js:57:10)
      at History.replaceState (node_modules/jsdom/lib/jsdom/living/generated/History.js:129:21)
      at node_modules/history/createBrowserHistory.js:211:23
      at Object.confirmTransitionTo (node_modules/history/createTransitionManager.js:44:7)
      at Object.replace (node_modules/history/createBrowserHistory.js:202:23)
      at Redirect.perform (node_modules/react-router/Redirect.js:102:15)
      at Redirect.componentDidMount (node_modules/react-router/Redirect.js:61:32)
      at commitLifeCycles (node_modules/react-dom/cjs/react-dom.development.js:15961:22)
      at commitAllLifeCycles (node_modules/react-dom/cjs/react-dom.development.js:17262:7)
console.error node_modules/react-dom/cjs/react-dom.development.js:15749
  The above error occurred in the <Redirect> component:
      in Redirect (created by ProfileContainer)
      in ProfileContainer
      in Router (created by BrowserRouter)
      in BrowserRouter (created by WrapperComponent)
      in WrapperComponent

This is my react component

export class ProfileContainer extends Component {
  render() {
    if (this.props.loginInfo.loginStatus !== "LOGIN_SUCCESS") {
      return <Redirect to={"/" + getOrgName() + "/home"} />;
    }

    const userData = this.props.userData.results[0];
    return <Profile userData={userData} loginInfo={this.props.loginInfo} />;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

This is my test file

describe("<ProfileContainer />", () => {
  it("renders without crashing", () => {
    const wrapper = mount(
      <BrowserRouter>
        <ProfileContainer {...mockProps} />
      </BrowserRouter>
    );
  });
});

Configuration

jest: 23.6.0
enzyme: 3.7.0
enzyme-adapter-react-16: 1.7.0

any suggestions will be helpful.

Petulah

Did you solve this? Suffering with the same problem rn – Canakin

Answer 1

I don't know if this helps, but I was getting this error in my Jest tests using BrowserRouter, and switching to MemoryRouter made it go away.

Disown

Answer 2

Well the error is quire descriptive you are trying to use history.replaceState with a url that has a different origin or host than the current url.

This is happening here

<Redirect to={"/" + getOrgName() + "/home"} />

You probably need to change the testURL in jest so that it match the origin and host of getOrgName() because the default url in jest is http://localhost

Here are more details on how to configure jest and overwrite the testURL.

Photoelectric