reactjs - 使用大理石图运行测试时不会执行 ajax 请求

Question

我使用 rxjs v6 和 redux-observable v1

我有向服务器发送请求并尝试测试史诗的史诗 doc .当我在发送请求发出 3 个操作之前运行测试史诗时，它会看到测试结果，但是当史诗来到 ajax 调用测试完成时。为了模拟请求，我使用 nock图书馆。

史诗级的:

import { ofType } from 'redux-observable'
import { of, merge, from } from 'rxjs'
import {
  switchMap,
  catchError
} from 'rxjs/operators'

import { apiRequest, handleAsyncError$ } from '../../async/lib'
import { actions as asyncActions } from '../../async'
import { LOADING_TYPES } from '../../async/constants'
import { actions as authActions } from '../reducer'

const setSignInLoading = (status) => of(asyncActions.setLoading({ type: LOADING_TYPES.signIn, status }))

const emitSignInPending = () => merge(
  setSignInLoading(true),
  of(authActions.signInPending())
)

const emitSignInSuccess = (payload) => merge(
  setSignInLoading(false),
  of(authActions.signInSuccess(payload))
)

const emitSignInFailed = (payload) => merge(
  setSignInLoading(false),
  handleAsyncError$({
    action: authActions.signInFailure,
    payload
  })
)

// --------- ajax call -----------
const startSignIn = (payload) => apiRequest({
  path: '/auth/signin/manager',
  method: 'post',
  body: payload
})

const mapSignInAction$ = ({ payload }) => merge(
  // --------- emit 3 actions -----------
  emitSignInPending(),
  // --------- finish test -----------
  startSignIn(payload)
    .pipe(
      switchMap((emitSignInSuccess)),
      catchError(emitSignInFailed)
    )
)

const signInEpic = action$ =>
  action$
    .pipe(
      ofType(authActions.signIn),
      switchMap(mapSignInAction$)
    )

export default signInEpic

api请求:

import { get } from 'lodash'
import { throwError } from 'rxjs'
import { ajax } from 'rxjs/ajax'
import { map, catchError } from 'rxjs/operators'

import { API } from '../../../../config'

const apiRequest = ({ token, path, method, body }) => {
  const settings = {
    url: `${API}${path}`,
    headers: { 'Content-Type': 'application/json' },
    responseType: 'json',
    crossDomain: true,
    method,
    body
  }

  if (token) {
    settings.headers['Authorization'] = `Bearer: ${token}`
  }

  return ajax(settings)
    .pipe(
      catchError((request) => {
        const error = get(request, 'response.error')

        return throwError({ error, request })
      }),
      map(({ response }) => response)
    )
}

export default apiRequest

测试: 诺克(API) .post('/auth/signin/manager') .reply(200, 回复)

  scheduler.run(({ hot, expectObservable }) => {
    const source = hot('-a|', { a: authActions.signIn({ email: 'manager', password: '123123' }) })
    const output$ = epic(source)

    expectObservable(output$).toBe('-(bcde)', {
      b: asyncAction.setLoading({ type: 'signIn', status: true }),
      c: authActions.signInPending(),
      d: asyncAction.setLoading({ type: 'signIn', status: false }),
      e: authActions.signInSuccess(response)
    })
  })

结果:

Expected:

    [{"frame": 1, "notification": {"error": undefined, "hasValue": true, "kind": "N", "value": {"error": false, "payload": {"status": true, "type": "signIn"}, "type": "[8] async/setLoading"}}}, {"frame": 1, "notification": {"error": undefined, "hasValue": true, "kind": "N", "value": {"error": false, "payload": undefined, "type": "[3] [2] auth/signIn/pending"}}}, {"frame": 1, "notification": {"error": undefined, "hasValue": true, "kind": "N", "value": {"error": false, "payload": {"status": false, "type": "signIn"}, "type": "[8] async/setLoading"}}}, {"frame": 1, "notification": {"error": undefined, "hasValue": true, "kind": "N", "value": {"error": false, "payload": {"data": {"token": "skldjf", "user": {"email": "manager", "id": 2, "passwordHash": "asdf", "passwordSalt": "6819c23dc7", "role": {"name": "user"}, "roleId": 1}}}, "type": "[4] [2] auth/signIn/success"}}}]

Received:

    [{"frame": 1, "notification": {"error": undefined, "hasValue": true, "kind": "N", "value": {"error": false, "payload": {"status": true, "type": "signIn"}, "type": "[8] async/setLoading"}}}, {"frame": 1, "notification": {"error": undefined, "hasValue": true, "kind": "N", "value": {"error": false, "payload": undefined, "type": "[3] [2] auth/signIn/pending"}}}]

Answer 1

Ajax 解析为微任务，因此 Epic 不会同步发出它，因此弹珠图无法处理它，我找不到如何使用弹珠图来处理它。如此简单的解决方案是:

it('return token and user 2', async (done) => {
  const response = {...}

  nock(API)
    .post('/auth/signin/manager')
    .reply(200, response)

  const source = authActions.signIn({ email: 'manager', password: '123123' })
  const action$ = ActionsObservable.of(source)

  epic(action$).pipe(toArray()).subscribe((actions) => {
    expect(actions).toEqual([
      asyncAction.setLoading({ type: 'signIn', status: true }),
      authActions.signInPending(),
      asyncAction.setLoading({ type: 'signIn', status: false }),
      authActions.signInSuccess(response)
    ])

    done()
  })

})

如果您发现如何用弹珠图做到这一点，请写下来。