web-dev-qa-db-ja.com

Jestでwindow.scrollToをスパイする方法は？

私は次の機能を備えた非常にシンプルな反応コンポーネントを得ました：

componentDidMount() {
  window.scrollTo(0, 0)
}

あなたは次のようなことはできないようです

window.scrollTo = jest.fn()

scrollTo関数をスパイする。

そのため、この関数をスパイするための最良の方法を知り、それがテストで使用されたことを主張したいと思います。

ありがとう

javascriptunit-testingmockingjestjsspy
9
Amir Hoseinian

Jestでは、グローバル名前空間にはglobalではなくwindowがアクセスする必要があります。

global.scrollTo = jest.fn()
6
Andreas Köberle

私にも同様の問題があり、スパイを割り当てるだけではうまくいきませんでした。

最終的に私はこのコードでこれを機能させることができました

const spyScrollTo = jest.fn();
Object.defineProperty(global.window, 'scrollTo', { value: spyScrollTo });

その後、ジェストでこのように確認することができました

const spyScrollTo = jest.fn();

describe('myComponent', () => {
  beforeEach(() => {
    Object.defineProperty(global.window, 'scrollTo', { value: spyScrollTo });
    Object.defineProperty(global.window, 'scrollY', { value: 1 });
    spyScrollTo.mockClear();
  });

  it('calls window.scrollTo', () => {
    myComponent();
    expect(spyScrollTo).toHaveBeenCalledWith({
      top: 1,
      behavior: 'smooth',
    });
  });
});
0
Martin Vich

Andreasが言ったように、グローバル名前空間を介してscrollTo()にアクセスする必要があります。しかし、それをスパイしてアサーションを作成するには、スパイ関数を変数に割り当てる必要があります。このようなもの：

const scrollToSpy = jest.fn();
global.scrollTo = scrollToSpy;
...
expect(scrollToSpy).toHaveBeenCalled();
0
strausd

依存関係：

_"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"jest": "^24.8.0"
"jest-environment-enzyme": "^7.1.1",
"jest-enzyme": "^7.1.1",
"jsdom": "^15.1.1"
_

window.scrollTo = jest.fn()は正常に動作します。

例えば：

_index.spec.tsx_：

_import React, { Component } from 'react';

class SomeComponent extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {
    e.preventDefault();
    window.scrollTo(0, 0);
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Click Me!</button>
      </div>
    );
  }
}

export default SomeComponent;
_

_index.spec.tsx_、モック_window.scrollTo_各テストケース：

_import React from 'react';
import { shallow } from 'enzyme';
import SomeComponent from './';

describe('SomeComponent', () => {
  test('should handle click', () => {
    const wrapper = shallow(<SomeComponent></SomeComponent>);
    const mEvent = { preventDefault: jest.fn() };
    window.scrollTo = jest.fn();
    wrapper.find('button').simulate('click', mEvent);
    expect(mEvent.preventDefault).toBeCalled();
    expect(window.scrollTo).toBeCalledWith(0, 0);
  });
});
_

_jest.config.js_：

_module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'enzyme',
  setupFilesAfterEnv: ['jest-enzyme'],
  testEnvironmentOptions: {
    enzymeAdapter: 'react16'
  },
  coverageReporters: ['json', 'text', 'lcov', 'clover']
};
_

単体テスト結果：

_ PASS  src/stackoverflow/58585527/index.spec.tsx
  SomeComponent
    ✓ should handle click (13ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.932s, estimated 3s
_

ソースコード： https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/58585527

0
slideshowp2