Question

我有以下redux saga，它会进行api调用并处理结果：

import { takeLatest } from 'redux-saga'
import { call, put } from 'redux-saga/effects'
import { normalize, arrayOf } from 'normalizr'
import * as actions from './actions'
import * as schemas from './schemas'
import * as types from './actionTypes'
import { api, constants as apiConstants } from '../../services/api'

export function* fetchWorks() {
  const { response, error } = yield call(api.getJson, apiConstants.WORKS_ENDPOINT)
  if (response) {
    const normalized = normalize(response.items, arrayOf(schemas.works))
    yield put(actions.fetchWorksSuccess(normalized))
  } else {
    yield put(actions.fetchWorksFail(error))
  }
}

我正在测试一切是否适用于这些开玩笑测试：

import { takeLatest } from 'redux-saga'
import { call, put } from 'redux-saga/effects'
import * as sagas from './sagas'
import * as actions from './actions'
import * as types from './actionTypes'
import { api, constants as apiConstants } from '../../services/api'

describe('works saga', () => {
  describe('fetchWorks', () => {
    it('should fetch data', () => {
      const generator = sagas.fetchWorks()
      const actual = generator.next().value
      const expected = call(api.getJson, apiConstants.WORKS_ENDPOINT)
      expect(actual).toEqual(expected)
    })

    // this test requires me to pass a response object to the generator
    it('should put fetchWorksSuccess on a response', () => {
      // so I create it here
      const response = {
        items: [{
          sys: { id: '1' },
          fields: { content: 'content' }
        }]
      }
      const generator = sagas.fetchWorks()
      const expected = put(actions.fetchWorksSuccess())
      // but I would expect to pass it here    
      generator.next()
      // but actually the test only succeeds if I pass it here
      const actual = generator.next({ response }).value
      expect(actual).toEqual(expected)
    })

    // same goes for this test
    it('should put fetchWorksFail on errors', () => {
      const error = new Error('Something went wrong')
      const generator = sagas.fetchWorks()
      const expected = put(actions.fetchWorksFail())
      generator.next()
      const actual = generator.next({ error }).value
      expect(actual).toEqual(expected)
    })
  })
})

但是，对于'should put fetchWorksSuccess on a response'和'should put fetchWorksFail on errors'测试，我必须手动将{response}和{error}对象分别传递到每个生成器。

我理解这些对象是必要的（因为if语句检查是否有响应），但我不明白为什么我必须将它传递给第二个.next()而不是第一个？因为我看到它的方式是第一个yield产生响应或错误对象，而不是第二个。有谁理解为什么？

Answer 1

这不是React的事情，它是一个生成器。

第一次调用generator.next()启动生成器，而不是从yield调用返回：

>>> function *example_generator() {
  console.log('before first yield', Array.slice(arguments));
  var first_yield = yield 'first';
  console.log('first yield returned', first_yield);
  var second_yield = yield 'second';
  console.log('second yield returned', second_yield);
  return 'done';
}
>>> generator = example_generator("generator", "creation")
Generator {}
>>> generator.next("first next")
before first yield  Array [ "generator", "creation" ]
Object { value: "first", done: false }
>>> generator.next("second next")
first yield returned second next
Object { value: "second", done: false }
>>> generator.next("third next")
second yield returned third next
Object { value: "done", done: true }

您对fetchWorks()的初始调用会创建生成器对象，但实际上并没有启动生成器。

以这种方式思考 - 第一次调用next()会为您提供传递给第一个yield的值;给第二次调用next()的参数允许您指定第一个yield的返回值。

手动将值传递给生成器会在jest测试中产生意外结果

1 个答案: