在 Jest 和 jest-dom 和 jsdom 中设置 window 的大小

Question

我用 jest-dom 和 jsdom.

在 Jest 中测试了 window 的高度

使用此代码：

import '@testing-library/jest-dom'

describe('test window height'), () => {
  test('test the height'), () => {
    expect(window.innerHeight).toBe(150) // 150 is an arbitrary value for testing the test ! 
   }) 
 })

结果是一个错误：

预期：150

收到：768

使用innerWidth，接收到的值为1024

太好了，这意味着 window 的大小可以用 Jest 和 jest-dom 测试。

但是 768 和 1024 是从哪里来的呢？它是默认值并且永远是吗？它是可配置的吗？如何配置？

Answer 1

768 和 1024 是默认值，Jest 正在为您的测试配置 jsdom。

您可以在测试中覆盖 window.innerHeight。但是 TypeScript 说不，因为 window 是一个不可写的成员。

对我来说 Object.defineProperty 使用 TypeScript 可以正常工作。

因此使用 JEST 这个测试应该通过绿色：

describe('test window height', () => {
  it('test the height',
    () => {
      Object.defineProperty(window, 'innerHeight', {
        writable: true,
        configurable: true,
        value: 150,
      });

      window.dispatchEvent(new Event('resize'));

      expect(window.innerHeight).toBe(150);
    });
});

在此处找到 Object.defineProperty 与 TS 的使用示例：How to test that a media query css applies to an element upon screen resize using jest and enzyme in reactjs

在 Jest 和 jest-dom 和 jsdom 中设置 window 的大小

Set size of window in Jest and jest-dom and jsdom

javascript

jestjs

jest-dom