测试 redux 操作答案

【问题标题】：Test redux-actions测试 redux 操作
【发布时间】：2020-12-07 13:31:05
【问题描述】：

如何使用 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 上找不到如何测试操作

【问题讨论】：

从 nodejs 制作应用程序并在您的计算机中创建-react-app 以进行测试的最佳方法？您还可以使用以下沙箱测试您在互联网上的操作：codesandbox 或 codepen。我确实做了一个代码框，你需要依赖代码框你可以在这里测试东西：codesandbox.io/s/great-lamport-5lgul?file=/src/store.js

标签： reactjs testing redux jestjs redux-actions

【解决方案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

【讨论】：

我找到了答案！您应该添加动作导入并使用实际动作 const 而不是 str 'addGradientStart'。
@evgeniya.osmakova 我只是给你一个正确方法的例子。至于具体的动作名称，可以使用自己的。在这里，我使用字符串操作名称来保持简单。如果您使用Symbol('action name')，则应在测试文件中导入并使用它们。