即使 Window.location.href 包含查询字符串，为什么 Window.location.search 未定义？

Question

我编写了一个函数来根据 David Walsh 的 Get Query String Parameters 获取给定查询字符串的值。

export const getQueryStringValue = (name) => {
  const formattedName = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
  const regex = new RegExp(`[\\?&]${formattedName}=([^&#]*)`);
  const results = regex.exec(window.location.search);

  return results === null
    ? ''
    : decodeURIComponent(results[1].replace(/\+/g, ' '));
};

我已经为基于How to mock window.location.href with Jest + Vuejs?的函数编写了一个测试。

it('should return query string value', () => {
  global.window = Object.create(window);
  Object.defineProperty(window, 'location', {
    value: {
      href: 'http://dummy.com?foo=bar'
    }
  });

  expect(getQueryStringValue('foo')).toBe('bar');
});

但是，当我运行测试时，出现以下错误。

expect(received).toBe(expected) // Object.is equality

Expected: "bar"
Received: ""

当我控制台日志window.location.search 它返回undefined。

  console.log __tests__/getQueryStringValue.test.js:14
    undefined

为什么即使 Window.location.href 包含查询字符串 (?foo=bar)，Window.location 搜索也会返回 undefined？设置href还不够吗？

Answer 1

当您设置 Window.location href 因为jsdom does not currently handle navigation 时，不会自动模拟 Window.location 搜索。您有几个选项可以解决该错误。

选项 1：设置 Window.location 搜索

it('should return query string value', () => {
  global.window = Object.create(window);
  Object.defineProperty(window, 'location', {
    value: {
      search: '?foo=bar'
    }
  });

  expect(getQueryStringValue('foo')).toBe('bar');
});

选项 2：将 Window.location 设置为新的 URL 实例

it('should return query string value', () => {
  global.window = Object.create(window);
  Object.defineProperty(window, 'location', {
    value: new URL('http://dummy.com/?foo=bar')
  });

  expect(getQueryStringValue('foo')).toBe('bar');
});

来源：https://stackoverflow.com/a/59979453/11809808