SecurityError：replaceState 无法将历史记录更新为在路径、查询或片段以外的组件中不同的 URL

Posted 2023-02-22

【中文标题】SecurityError：replaceState 无法将历史记录更新为在路径、查询或片段以外的组件中不同的 URL

【英文标题】：SecurityError: replaceState cannot update history to a URL which differs in components other than in path, query, or fragment

【发布时间】：2019-04-23 20:02:52

【问题描述】：

我正在尝试使用玩笑和酶来测试反应组件。但是每当我尝试安装组件时，都会出现以下错误。

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

这是我的反应组件

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

任何建议都会有所帮助。

【问题讨论】：

你解决了吗？遇到同样的问题 rn

【参考方案1】：

嗯，错误是描述性的，您尝试将 history.replaceState 与具有不同于当前 url 的来源或主机的 url 一起使用。

这里发生了

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

您可能需要更改 jest 中的 testURL，使其与 getOrgName() 的来源和主机匹配，因为 jest 中的默认 url 是 http://localhost

这里有更多关于如何配置 jest 和覆盖 testURL 的details。