时间戳

首页 > 解决方案 > 测试窗口位置是否设置正确

javascript - 测试窗口位置是否设置正确

问题描述

我在我的useEffect钩子中设置窗口位置如下。

const MyComponent = (name) => {
  React.useEffect(() => {
    window.location.href = `/${name}/mypath${window.location.search}`
  }, []);

  return <Fragment/>;
};

我正在寻找测试该href值是否正确匹配。

因此，我按如下方式模拟数据并期望该值与以下字符串匹配。

www.test.com/name/mypath?param=1

但我最终得到错误，说 window.location.href 的值实际上如下。

/[object Object]/mypath?param=1

它缺少主机，也没有在 href 中捕获名称 prop 的值。我能得到一些关于我做错了什么的建议吗？谢谢。

我的测试如下。

jest.spyOn(React, 'useEffect').mockImplementation(f => f());

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

describe('My tests', () => {
  const render = () => shallow(
    <MyComponent name='name' />
  );

  it('should pass', () => {
    const rendered = render();
    const url = 'www.test.com/name/mypath?param=1';
    expect(window.location.href).toEqual(url);
  });
});

标签： javascriptreactjsjestjs

解决方案

你忘了为你的组件解构 props 参数，

它应该是

const MyComponent = ({name}) => {
//rest of your code

}

原因是组件函数只接收一个参数，这是一个包含您传递的所有道具的对象。你所做的只是所谓的name。我所做的是name从道具对象中解构属性，即获取道具中传递的name值

推荐阅读