假设我有一个具有多个分支的 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 分支)。

这里的复杂之处在于我正在尝试也测试选择器，我读过的所有选择器设计似乎都暗示了以下两点:

1. 您通过将选择器和缩减器放在同一个文件中来封装您的状态。
2. mapStateToProps 应该只需要知道两件事，全局状态和相关的选择器。

所以这是我的问题:将这些或多或少组成的 reducer 与根级别相关的选择器配对在一起，使我的测试样板文件变得有点厚。

更不用说具有整个树知识的硬写选择器感觉它违背了 reducer 模块化尝试的要点。

我 100% 确定我遗漏了一些明显的东西，但我真的找不到任何示例代码来演示测试模块化缩减器和选择器的方法。

如果选择器通常应该知道整个全局状态，但您有高度组合的缩减器，是否有一种干净、惯用的方法来测试它？或者可能是更具可组合性的选择器设计？

最佳答案

并置选择器和缩减器的要点是一个文件中的缩减器和选择器应该在相同的状态形状上运行。如果您将 reducer 拆分为多个文件来组合它们，您应该对您的选择器执行相同的操作。

您可以在我的 new Egghead series 中看到这方面的示例(视频 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])

这样根选择器委托(delegate)给子选择器，就像根缩减器委托(delegate)给子缩减器一样。在每个文件中，选择器中的state 对应于导出的reducer 的state，state shape 实现细节不会泄露到其他文件。

最后，为了测试那些 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)
  })
})

关于javascript - 有没有一种惯用的方法来测试嵌套状态分支？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37647178/