问题 是否有一种惯用的方法来测试嵌套的状态分支？

因此，假设我有一个具有多个分支的reducer，但每个分支都足够相似，可以使用工厂函数生成。所以，我创建了一个：

import { combineReducers } from 'redux'

const createReducerScope = scopeName => {
  const scope = scopeName.toUpperCase()

  const contents = (state = {}, action) => {
    switch (action.type) {
      case `${scope}_INSERT`:
        return { ...state, [action.id]: action.item }
      default:
        return state
    }
  }

  const meta = (state = {}, action) => {
    switch (action.type) {
      case `${scope}_REQUEST`:
        return { ...state, requesting: true }
      case `${scope}_REQUEST_FAILURE`:
        return {
          ...state,
          requesting: false,
          errorMessage: String(action.error)
        }
      case `${scope}_REQUEST_SUCCESS`:
        return {
          ...state,
          requesting: false,
          errorMessage: null
        }
      default:
        return state
    }
  }

  return combineReducers({ contents, meta })
}

我用它来组成一个更大的根级状态树：

const products = createReducerScope('products')
const orders = createReducerScope('orders')
const trades = createReducerScope('trades')

const rootReducer = combineReducers({ products, orders, trades })

这应该给我一个状态图，看起来像这样：

{
  products: { contents, meta },
  orders: { contents, meta },
  trades: { contents, meta }
}

如果我想测试这种状态，我的第一直觉是在我的测试套件中创建这个范围的一个版本，然后测试那个孤立的reducer（只是断言对 contents，和 meta 分支机构）。

这里的复杂因素是我正在尝试也测试选择器，我读过的所有选择器设计似乎都暗示了这两件事：

您可以通过在同一文件中共置选择器和缩减器来封装您的状态。
mapStateToProps 应该只需要知道两件事，全局状态和相关选择器。

所以这就是我的问题：将这些或多或少组合的减速器与根级关注选择器配对在一起使得我的测试有点厚，带有样板。

更不用说具有整个树知识的硬写选择器感觉它无视复位器模块化尝试的要点。

我100％肯定我错过了一些明显的东西，但我找不到任何示例代码来演示测试模块缩减器和选择器的方法。

如果选择器通常应该知道 整个全球国家，但是你有那些高度复杂的减速器，是否有一种干净，惯用的测试方法？或者可能是更具组合性的选择器设计？

定位选择器和减速器的重点是 一个文件中的reducer和selectors应该在相同的状态下运行。如果将reducers拆分为多个文件来组合它们，则应对选择器执行相同操作。

你可以在我看到这个例子新的Egghead系列（视频 10 和 20 可能特别有用）。

所以你的代码应该更像

const createList = (type) => {
  const contents = ...
  const meta = ...
  return combineReducers({ contents, meta })
}

// Use default export for your reducer
// or for a reducer factory function.
export default createList

// Export associated selectors
// as named exports.
export const getIsRequesting = (state) => ...
export const getErrorMessage = (state) => ...

然后，你的 index.js 可能看起来像

import createList, * as fromList from './createList'

const products = createList('products')
const orders = createList('orders')
const trades = createList('trades')

export default combineReducers({ products, orders, trades })

export const getIsFetching = (state, type) =>
  fromList.getIsFetching(state[type])

export const getErrorMessage = (state, type) =>
  fromList.getErrorMessage(state[type])

这样根选择器就会委托给子选择器，就像root reducers委托给子reducer一样。在每个文件中， state 内部选择器对应于 state 导出的reducer和状态形状实现细节不会泄漏到另一个文件。

最后，为了测试那些reducer / selector包，你可以做类似的事情

import createList, * as fromList from './createList')

describe('createList', () => {
  it('is not requesting initially', () => {
    const list = createList('foo')
    const state = [{}].reduce(list)
    expect(
      fromList.isRequesting(state)
    ).toBe(false)
  })

  it('is requesting after *_REQUEST', () => {
    const list = createList('foo')
    const state = [{}, { type: 'foo_REQUEST' }].reduce(list)
    expect(
      fromList.isRequesting(state)
    ).toBe(true)
  })
})

问题是否有一种惯用的方法来测试嵌套的状态分支？

答案:

热门问题

问题 是否有一种惯用的方法来测试嵌套的状态分支？

答案:

热门问题

问题是否有一种惯用的方法来测试嵌套的状态分支？