reactjs - SecurityError : replaceState cannot update history to a URL which differs in components other than in path, 查询或片段

Question

我正在尝试使用 Jest 和 enzyme 测试 react 组件。但是每当我尝试安装组件时，都会出现以下错误。

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

这是我的 react 组件

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>

这是我的测试文件

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

配置

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

任何建议都会有所帮助。

Answer 1

好吧，该错误是描述性的，您正在尝试将 history.replaceState 与具有与当前 url 不同的来源或主机的 url 一起使用。
这发生在这里

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

您可能需要更改 testURL开 Jest ，以便它匹配 getOrgName() 的来源和宿主因为 jest 中的默认 url 是 http://localhost这里有更多 details关于如何配置 jest 和覆盖 testURL。