测试React组件window.location设置是否正确时异常如何解决

1. 组件参数接收错误 #

React 函数组件的第一个入参是完整的props对象，你直接将入参命名为name，等于把整个props对象赋值给了name变量，做字符串拼接时对象会被自动转为[object Object]，就是你报错里看到的错误值。

修复代码 #

对props做解构取出name属性：

const MyComponent = ({ name }) => { // 这里改为解构取值
  React.useEffect(() => {
    // 拼接host，否则生成的是相对路径，不会携带域名
    window.location.href = `${window.location.host}/${name}/mypath${window.location.search}`
  }, []);

  return <Fragment/>;
};

2. href赋值未拼接host #

你原有代码里的href赋值是/${name}/mypath${window.location.search}，属于站点相对路径，赋值时不会自动带上host，自然生成的地址缺少域名前缀。

3. 测试代码优化 #

你mock的window.location对象默认没有初始化href属性，建议在mock时主动添加，避免赋值出现异常：

Object.defineProperty(window, "location", {
  value: {
    host: "www.test.com",
    search: "?param=1",
    href: ""
  },
  writable: true
});

另外如果你用的是新版Enzyme的shallow渲染，本身已经支持触发useEffect执行，不需要手动mock useEffect的实现，可以把jest.spyOn(React, 'useEffect').mockImplementation(f => f())这行代码删除，避免重复执行副作用。

内容的提问来源于stack exchange，提问作者stacky