jestjs - Jest/Enzyme - 如何在不同的视口(viewport)进行测试？

Question

我正在尝试在某个视口(viewport)宽度的组件上运行测试。我正在执行以下操作，但这似乎并没有改变它:

test('Component should do something at a certain viewport width.', () => {
    global.innerWidth = 2000;
    const component = mount(<SomeComponent />);
    ...
});

我还找到了一篇解释如何使用 JSDom 的文章，但是由于 Jest 现在随 JSDom 一起提供，我想知道是否有本地解决方案。

https://www.codementor.io/pkodmad/dom-testing-react-application-jest-k4ll4f8sd

Answer 1

背景资料:

jsdom does not implement window.resizeBy()或 window.resizeTo()

jsdom defines the window innerWidth and innerHeight为 1024 x 768

可以使用 jsdom 模拟窗口调整大小通过手动设置 window.innerWidth 和 window.innerHeight 并触发 resize事件

这是一个例子:

comp.js

import * as React from 'react';

export default class Comp extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = { width: 0, height: 0 }
  }
  updateDimensions = () => {
    this.setState({ width: window.innerWidth, height: window.innerHeight });
  }
  componentDidMount() {
    this.updateDimensions();
    window.addEventListener("resize", this.updateDimensions);
  }
  componentWillUnmount() {
    window.removeEventListener("resize", this.updateDimensions);
  }
  render() {
    return <div>{this.state.width} x {this.state.height}</div>;
  }
}

comp.test.js

import * as React from 'react';
import { shallow } from 'enzyme';

import Comp from './comp';

const resizeWindow = (x, y) => {
  window.innerWidth = x;
  window.innerHeight = y;
  window.dispatchEvent(new Event('resize'));
}

describe('Comp', () => {
  it('should display the window size', () => {
    const component = shallow(<Comp />);

    expect(component.html()).toEqual('<div>1024 x 768</div>');

    resizeWindow(500, 300);
    expect(component.html()).toEqual('<div>500 x 300</div>');

    resizeWindow(2880, 1800);
    expect(component.html()).toEqual('<div>2880 x 1800</div>');
  });
});

笔记:

截至Enzyme v3 shallow calls React lifecycle methods like componentDidMount() 所以它可以用来代替mount

这个答案大量借鉴了 here 的信息。 , here , here ，以及@JoeTidee 自己的答案 here .