在 React 中使用 Redux-Saga/Fetch-mock 测试重定向路由

Question

我正在尝试测试 redux-saga 中何时发生路由重定向。除了这个我还没有弄清楚如何测试之外，其他所有测试都通过了。

这是我正在测试的 saga 函数...

export function* doFetch({ payload: { id } }) {
  try {
    const station = yield call(stationApi.fetch, id)
    yield put(set(station))
    const allStations = yield call(stationApi.fetch)
    const cashDrawer = yield call(buildCashDrawerState, station, allStations)
    yield put(replaceCashDrawerState(cashDrawer))
    yield call(redirectPos, station)
  } catch (error) {
    yield put(notifyError(
      'Something went wrong during the station fetch. Please try again later',
      { id: 'station' },
    ))
  }
}

这是重定向方法...

const redirectPos = (station) => {
  if (window.location.href.includes('pos') && station.cash_drawer) {
    sagamore.router.redirect('pos')
  } else if (!station.cash_drawer) {
    sagamore.router.redirect('sales/dashboard')
  } else {
    return
  }
}

这是目前为止的测试...

fdescribe('sagas/station', () => {
  afterEach(() => {
    fetchMock.restore()
  })

  fdescribe('doFetch', () => {
    it('fetches station and cash drawer', () => {
      const id = 1
      const station = {
        id,
        name: 'new name',
        cash_drawer: { location_id: 'location', id: 2 },
      }
      const stations = [
        { id: 10, name: 'Station1', cash_drawer_id: 2 },
        { id: 11, name: 'Station2', cash_drawer_id: 2 },
        // { id: 12, name: 'Station3', cash_drawer_id: 3 },
      ]
      fetchMock.mock(
        `/api/stations/${id}`,
        station,
      )
      fetchMock.mock(
        `/api/stations`,
        { results : stations },
      )
      const saga = doFetch({ payload: { id } })
      let expected
      expected = call(stationApi.fetch, id)
      expect(saga.next().value).toEqual(expected)
      expected = put(set(station))
      expect(saga.next(station).value).toEqual(expected)
      expected = call(stationApi.fetch)
      expect(saga.next().value).toEqual(expected)
      saga.next({ results: stations })
      expected = put(replaceCashDrawerState({ drawer: {...station.cash_drawer, stations: stations} }))
      expect(saga.next({ drawer: {...station.cash_drawer, stations: stations} }).value).toEqual(expected)
      // test redirectPos(...)
      expected = call(redirectPos, station)
      expect(saga.next().value).toEqual(expected)
    })
  })
})

我是 Redux-Saga 和测试的新手。在研究它时，我一直无法找到测试它的方法。任何帮助或指导将不胜感激。

Answer 1

通常，当您编写单元测试时，想法是单独测试每个单元。因此，在您的情况下，从传奇的角度来看， redirectPos 内部的逻辑并不重要，您需要测试的只是使用正确的参数调用它。然后，您可以专门为测试内部结构的 redirectPos 函数编写另一个测试。

测试当前位置可能有点棘手，我建议访问有关该主题的其他 SO 问题，例如

在 React 中使用 Redux-Saga/Fetch-mock 测试重定向路由

Testing redirect routes with Redux-Saga/Fetch-mock in React

reactjs

unit-testing

redux-saga