Question

我有一个if条件，看起来像这样：

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

问题在于，虽然这在Jest中不起作用，因为history在我的测试中是一个空对象。

在我的测试中需要做什么来使用history对象？我在Node.js服务器上使用React运行它。不确定这是否重要，但我也使用React Router。

测试用例：

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;
}

Answer 1

您需要使用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()
  })
})

参考文献：

Answer 2

这适用于我的场景，看起来与你的相似。

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

如何在Jest中访问历史对象

2 个答案: