Redux 存储在集成测试期间未更新答案

【问题标题】：Redux store is not updated during integration testRedux 存储在集成测试期间未更新
【发布时间】：2020-01-09 03:08:29
【问题描述】：

我正在尝试使用 Jest 和 Enzyme 对 React-Redux 应用程序进行集成测试。应用程序本身可以正常工作，并且 Redux 商店会在组件调度操作后正确更新。但是当我运行集成测试时，商店在操作被调度后有一个初始值。

这是我的测试文件：

import SendMessageSendsay from '../utils/sendMessage'
import {testStore} from '../utils'
import {sendMessage } from '../redux/actions/messageActions'

jest.mock('../utils/sendMessage');

describe('sendMessage action', ()=> {
    const message = {
        subject: 'Message subject',
        toEmail: 'receiver@fakegmail.com'
    }

    test('Send message: Should update store correctly', () => {
        const store = testStore();
        const referenceState = {
            messages: {
              messages: [
                {
                  date: '2019-08-30T11:36:14.813Z',
                  subject: 'Message subject',
                  trackId: '95'
                }
              ],
              isSent: true,
              prevToEmail: 'receiver@fakegmail.com'
            }
          }
        SendMessageSendsay.mockResolvedValue({'track.id' : '95' })       
        store.dispatch(sendMessage(message))
        const newState = store.getState();
        console.log(newState);
        expect(newState).toBe(referenceState);  

    })
});

我得到了这些结果：

● sendMessage action › Send message: Should update store correctly

    expect(received).toBe(expected) // Object.is equality

    - Expected
    + Received

      Object {
        "messages": Object {
    -     "isSent": true,
    -     "messages": Array [
    -       Object {
    -         "date": "2019-08-30T11:36:14.813Z",
    -         "subject": "Message subject",
    -         "trackId": "95",
    -       },
    -     ],
    -     "prevToEmail": "receiver@fakegmail.com",
    +     "isSent": false,
    +     "messages": Array [],
    +     "prevToEmail": "",
        },
      }

收到的地方是我的减速器中的初始状态。这是我的行动：

export const sendMessage = (message) => (dispatch) => {
  sendMessageSendsay(message)
  .then((res) => dispatch(
    {
      type: SEND_MESSAGE,
      message: {
        date: new Date(),
        subject: message.subject,
        trackId: res['track.id']
      },
      prevToEmail: message.toEmail
    }
  ))
}

这是减速器：

export const initialState = {
    messages : [],
    isSent: false,
    prevToEmail: ''
}

export default (state = initialState, action) => {
    switch (action.type) {
        case SEND_MESSAGE: 
        {
            return {
                ...state,
                messages: [
                    ...state.messages,
                    action.message
                ],
                isSent: true,
                prevToEmail: action.prevToEmail
            }; 
        }

【问题讨论】：

你必须分享你的actions和reducers！
sendMessage 是否会导致存储异步更新？如果是这样那么也许你可以subscribe在测试中改变状态
@HMR 是的，它使用 promise 异步向外部 API 发出请求
我认为你可以试试this 如果它不起作用，请尝试在你的 thunk 操作函数中返回承诺。

标签： reactjs react-redux jestjs enzyme

【解决方案1】：

根据@HMR 评论，我将操作修改为：

export const sendMessage = (message) => (dispatch) => {
  return new Promise((resolve) => {
    sendMessageSendsay(message)
    .then((res) => resolve(dispatch(
      {
        type: SEND_MESSAGE,
        message: {
          date: new Date(),
          subject: message.subject,
          trackId: res['track.id']
        },
        prevToEmail: message.toEmail
      }
    )))
  })
}

并对此进行测试：

import SendMessageSendsay from '../utils/sendMessage'
import {testStore} from '../utils'
import {sendMessage } from '../redux/actions/messageActions'

jest.mock('../utils/sendMessage');

describe('sendMessage action', ()=> {
    const message = {
        subject: 'Message subject',
        toEmail: 'receiver@fakegmail.com'
    }

    test('Send message: Should update store correctly', () => {
        const store = testStore();
        const referenceState = {
            messages: {
              messages: [
                {
                  subject: 'Message subject',
                  trackId: '95'
                }
              ],
              isSent: true,
              prevToEmail: 'receiver@fakegmail.com'
            }
          }

        SendMessageSendsay.mockResolvedValue({'track.id' : '95' })       

        return store.dispatch(sendMessage(message))
        .then(() => {
          const newState = store.getState();
          expect(newState).toMatchObject(referenceState); 
        })

    })
});

我使用toMatchObject() 而不是toEqual() 来解决时间戳问题。

【讨论】：