Jest + React：每次测试前重置 location.href

Question

我有一个 React 组件，它会考虑 URL 参数，然后根据该参数进行一些获取。默认情况下，如果没有设置参数，则使用默认值。

问题是 Jest 似乎不会在每次测试后重置

href

属性，因此如果上一个测试导航到

my-url?some=param

，则下一个测试仍将设置

href

。

这意味着在更改

href

与测试中组件的交互后，下一个测试将具有之前的值。这样做的副作用是，如果未设置参数，我无法测试默认值，因为它将始终由之前的测试设置。

我尝试过的事情

  beforeEach(() => {
    window.location.assign('');
  });

抛出错误

Not implemented: navigation (except hash changes)

。

  beforeEach(() => {
    window.location.href = '';
  });

抛出错误

Not implemented: navigation (except hash changes)

。

  beforeEach(() => {
    Object.defineProperty(window, 'location', {
      value: {
        href: ''
      }
    });
  });

抛出错误

Cannot redefine property 'location'

。

在所有这些情况下，它是空字符串

''

还是正确的 URL（如

http://localhost

）并不重要。

问题

是否有某种方法可以在每次测试之前重置

href

属性？ 我并不是要嘲笑它：它应该像默认行为一样工作，但只需在每次测试之前重置它即可。

这不应该是 Jest 的默认行为吗？自动清理 DOM 但保留

href

为之前测试的值有什么用？

Answer 1

看起来这些都没有在 JSDOM 中实现。

无论如何你都需要嘲笑它。你可以尝试这样的事情：

const mockHref = jest.fn();
Object.defineProperty(window, 'location', {
  value: {
    get href() {
      return mockHref();
    },
  },
});

describe('it should work', () => {
  beforeEach(() => {
    mockHref.mockReturnValue('empty');
  })

  it('should work', () => {
    expect(window.location.href).toEqual('empty')
  })
})

Answer 2

是的，你应该添加

beforeEach(() => {
  Object.defineProperty(window, 'location', {
      writable: true,
      value: {
        href: ${yourUrl},
      },
   });
});

writable:true

应该可以在每个测试用例之前将 url 重置回 yourUrl。