Блог

Главная - Вопросы по программированию - Тестовые сокращения-действия

Тестовые сокращения-действия

#reactjs #testing #redux #jestjs #redux-actions

#reactjs #тестирование #сокращение #jestjs #redux-действия

Вопрос:

Как я могу протестировать с помощью 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

Комментарии:

1. лучший способ сделать это, создав приложение из nodejs и create-react-app на вашем компьютере для тестирования? также вы можете протестировать свои действия в Интернете, используя песочницы, такие как: codesandbox или codepen. я действительно создал codesandbox с требуемой зависимостью от codesandbox, и вы можете проверить это здесь: codesandbox.io/s/great-lamport-5lgul?file=/src/store.js

Ответ №1:

Решение для модульного тестирования для редукторов:

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

Комментарии:

1. Я нашел ответ! Вы обуты в импорт add actions и вместо str ‘addGradientStart’ используете real actions const .

2. @evgeniya.osmakova Я просто привожу вам пример правильного пути. Что касается конкретного имени действия, вы можете использовать свое собственное. Здесь я использую строковые имена действий для упрощения. Если вы используете Symbol('action name') , вы должны импортировать и использовать их в тестовом файле.