如何用Jest测试url的变化

t3psigkw 于 2023-05-11 发布在 Jest

关注(0)|答案(4)|浏览(170)

我有以下函数要测试

function tradePage() {
  setTimeout(function() {
    window.location.pathname = document
      .getElementById('button')
      .getAttribute('new-page');
  }, 100);
}

我写了下面的测试：

test('should change page when button is clicked', () => {
  var button = document.querySelector('#button');

  jest.useFakeTimers();
  button.dispatchEvent(createEvent('click'));
  jest.runAllTimers();

  expect(window.location.pathname).toEqual('/new-url');
});

但是当我运行测试时，我得到了这个错误：

expect(received).toEqual
    Expected value to equal:
    "/new-url"
    Received:
    "blank"

我已经做过/尝试过的事情

我的packages.json已经设置了"testURL"。
我发现了这个可能的解决方案（不起作用）：

Object.defineProperty(window.location, 'pathname', {
   writable: true,
   value: '/page/myExample/test',
 });

你知道我还能尝试什么吗？

jestjs

来源：https://stackoverflow.com/questions/50977862/how-to-test-url-change-with-jest

4条答案

按热度按时间

li9yvcax1#

我通过在测试开始时声明一个全局变量找到了一个工作方法：

global.window = { location: { pathname: null } };

然后像这样检查这个变量：

expect(global.window.location.pathname).toContain('/new-url');

这招很管用

赞(0）回复(0）举报 2023-05-11

1hdlvixo2#

而不是必须设置路径名为空，你可以检查它像
expect(global.window.location.href).toContain('/new-url').
这样就不必为路径名分配null。

赞(0）回复(0）举报 2023-05-11

yzckvree3#

Object.assign(location, { host: "www.newhost.com", pathname: 'file.txt' });

它将更新所有location URL对象属性（origin, href, hostname, host）。
所以最终的href属性将是https://www.newhost.com/file.txt。
在beforeEach块中执行此操作。
只需调用console.log(location)来验证结果。编码快乐！

赞(0）回复(0）举报 2023-05-11

9lowa7mx4#

有几种方法可以实现这一点，这取决于您正在寻找的测试粒度的程度。

全球

Jest提供了一个testEnvironmentOptions属性，它可以有一个url：

// jest.config.js
module.exports = {
  ...
  testEnvironmentOptions: {
    url: "https://yourtesturl.com/some-path"
  },
  ....
};

测试套件

方法基于这里的答案。

const OLD_LOCATION = window.location;

beforeEach(() => {
  Object.defineProperty(window, 'location', {
    value: new URL("https://yourtesturl.com/some-path"),
    writable: true,
  });
});

afterAll(() => {
  Object.defineProperty(window, 'location', {
    value: OLD_LOCATION,
    writable: true,
  });
});

每次测试

test("Some test", () => {
  const OLD_LOCATION = window.location;

  Object.defineProperty(window, 'location', {
    value: new URL("https://yourtesturl.com/some-path"),
    writable: true,
  });

  Object.defineProperty(window, 'location', {
    value: OLD_LOCATION,
    writable: true,
  });
});

备注

可以覆盖window.location对象。只是要确保在测试套件完成后恢复它，这样就不会搞砸其他会受到更改影响的测试。

赞(0）回复(0）举报 2023-05-11

我来回答

如何用Jest测试url的变化

4条答案

相关问题

热门标签

最新问答