web-dev-qa-db-ja.com

Jest / Enzyme-異なるビューポートでテストする方法は？

特定のビューポート幅でコンポーネントのテストを実行しようとしています。私は次のことをしていますが、これはそれを変更していないようです：

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

jestjsviewportenzyme
16
JoeTidee

背景情報：

次に例を示します。

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 shallowcalls React componentDidMount() のようなライフサイクルメソッドの時点で使用できるため/ mount
  • この回答は、情報 here 、 here 、 here 、および@JoeTidee自身の回答 here を多用しています。
24
Brian Adams

TypeScriptを使用している場合は、window.innerWidth/innerHeightが読み取り専用であると警告されます。これを回避するには、プロパティを再宣言します。

Object.defineProperty(window, 'innerWidth', {writable: true, configurable: true, value: 105})

またはObject.assignメソッドを使用：

window = Object.assign(window, { innerWidth: 105 });

どちらも非常に優れたソリューションではありませんが、機能します。

3
r3dDoX

私のために働く。コードはカバーされていないものとしてマークされなくなりました。

it('resize event listener changes the state', () => {
  const wrapper = shallow(<Component />);
  const instance = wrapper.instance();

  instance.setState({
    mobileMode: true
  });

  global.innerWidth = 800;
  window.dispatchEvent(new Event('resize'));
  expect(instance.state.mobileMode).toBeFalsy();

  global.innerWidth = 600;
  window.dispatchEvent(new Event('resize'));
  expect(instance.state.mobileMode).toBeTruthy();
});

コンポーネント内のリスナーのサイズを変更する

...
 resizeListener = () => {
      if (window.innerWidth < 768) {
        this.setState({
          mobileMode: true
        });
      } else {
        this.setState({
          mobileMode: false
        });
      }
    };
    window.addEventListener('resize', resizeListener);
...
0
Dm Mh