web-dev-qa-db-ja.com

Jestで履歴オブジェクトにアクセスする方法

次のようなif条件があります。

if (history.state !== null && history.state.query)

問題は、これはJestでは機能しませんが、私のテストではhistoryが空のオブジェクトであるためです。

historyオブジェクトを使用するには、テストで何をする必要がありますか？ Node.jsサーバーでReactを使用してこれを実行しています。これが重要かどうかはわかりませんが、Reactルーターも使用しています。

テストケース：

beforeEach(() => {
  window.ga = jest.fn();
  window.analytics = jest.fn();
  window.analytics.track = jest.fn();
});

it('should set up props from history state', () => {
  let location = {
    pathname: '/explore',
    query: {
      query: 'yahoo',
    },
  };

  global.history = { state: { query: 'google'} };

  const wrapper = mount(
    <LandingPage location={location} />
  );

  console.log("global.history.state: " + global.history.state); // prints null
});

コンポーネントの一部（コンポーネント全体を配置することはできません）：

if (props.location && props.location.pathname === '/explore') {
  explorePath = true;
  skipIntro = true;
  explore = true;

  /* checks if history.state is not equal to null
   * if check passes, search query and results will appear
   */
  if (history.state !== null && history.state.query) {
    currentValue = history.state.query;
    employeeMin = history.state.eMin;
    employeeMax = history.state.eMax;
    revenueMin = history.state.rMin;
    revenueMax = history.state.rMax;
  }
} else {
  explore = skipIntro;
}
reactjsjestjsenzyme
5
rk919

createMemoryStoreを次のようにモックするには、historyを使用する必要があります。

import React from 'react'
import { shallow } from 'enzyme'
import { createMemoryHistory } from 'history'

import Page from '../Page'

describe('<Page />', () => {
  it('should render correctly', () => {
    const history = createMemoryHistory('/dashboard')
    const renderedComponent = shallow(
      <Page history={history} />
    )
    expect(renderedComponent).toMatchSnapshot()
  })
})

参照：

14
niftylettuce

これはあなたのシナリオに似ている私のシナリオでうまくいきました。

beforeAll(() => {
  window.history.replaceState({query: 'google'}, 'MOCK');
});
0
Bart