reactjs - 测试 redux 操作

Question

如何使用 Jest 使用 React-redux 操作测试此文件：

import { combineReducers } from 'redux';
import { handleActions } from 'redux-actions';
import * as actions from '../actions/index';

const background = handleActions({
  [actions.changeBackgroundType](state, { payload: { type } }) {
    return { ...state, type };
  },
  [actions.addGradientStart](state, { payload: { color } }) {
    return { ...state, color1: color };
  },
  [actions.addGradientEnd](state, { payload: { color } }) {
    return { ...state, color2: color };
  },
}, { type: 'none', color1: '#ffffff', color2: '#ffffff' });

const url = handleActions({
  [actions.addUrl](state, { payload: { url: newUrl } }) {
    return newUrl;
  },
}, '');


export default combineReducers({
  background,
  url,
});

如果我使用“redux-actions”库，在 Internet 上找不到如何测试操作

Answer 1

reducer的单元测试解决方案：

reducer.js：

import { combineReducers } from 'redux';
import { handleActions } from 'redux-actions';
import * as actions from './actions';

const background = handleActions(
  {
    [actions.changeBackgroundType](state, { payload: { type } }) {
      return { ...state, type };
    },
    [actions.addGradientStart](state, { payload: { color } }) {
      return { ...state, color1: color };
    },
    [actions.addGradientEnd](state, { payload: { color } }) {
      return { ...state, color2: color };
    },
  },
  { type: 'none', color1: '#ffffff', color2: '#ffffff' },
);

const url = handleActions(
  {
    [actions.addUrl](state, { payload: { url: newUrl } }) {
      return newUrl;
    },
  },
  '',
);

export default combineReducers({
  background,
  url,
});

actions.js：

export const changeBackgroundType = 'changeBackgroundType';
export const addGradientStart = 'addGradientStart';
export const addGradientEnd = 'addGradientEnd';
export const addUrl = 'addUrl';

reducer.test.js：

import reducers from './reducer';

describe('65145829', () => {
  describe('background reducer', () => {
    it('should change background type', () => {
      expect(
        reducers(
          { background: { type: 'none', color1: '#ffffff', color2: '#ffffff' } },
          { type: 'changeBackgroundType', payload: { type: 'type-a' } },
        ).background,
      ).toEqual({
        type: 'type-a',
        color1: '#ffffff',
        color2: '#ffffff',
      });
    });

    it('should add gradient start', () => {
      expect(
        reducers(
          { background: { type: 'none', color1: '#ffffff', color2: '#ffffff' } },
          { type: 'addGradientStart', payload: { color: '#bababa' } },
        ).background,
      ).toEqual({
        type: 'none',
        color1: '#bababa',
        color2: '#ffffff',
      });
    });
    it('should add gradient end', () => {
      expect(
        reducers(
          { background: { type: 'none', color1: '#ffffff', color2: '#ffffff' } },
          { type: 'addGradientEnd', payload: { color: '#bababa' } },
        ).background,
      ).toEqual({
        type: 'none',
        color1: '#ffffff',
        color2: '#bababa',
      });
    });
  });

  describe('url reducer', () => {
    it('should add url', () => {
      expect(reducers({ url: '' }, { type: 'addUrl', payload: { url: 'localhost' } }).url).toEqual('localhost');
    });
  });
});

单元测试结果：

 PASS  src/stackoverflow/65145829/reducer.test.js (9.086s)
  65145829
    background reducer
      ✓ should change background type (4ms)
      ✓ should add gradient start (1ms)
      ✓ should add gradient end (1ms)
    url reducer
      ✓ should add url

------------|----------|----------|----------|----------|-------------------|
File        |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
------------|----------|----------|----------|----------|-------------------|
All files   |      100 |      100 |      100 |      100 |                   |
 actions.js |      100 |      100 |      100 |      100 |                   |
 reducer.js |      100 |      100 |      100 |      100 |                   |
------------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       4 passed, 4 total
Snapshots:   0 total
Time:        10.527s