Есть ли способ правильно издеваться над селекторами Reselect для модульного тестирования?

Дело в том, что Reselect основан на концепции композиции. Таким образом, вы создаете один селектор из множества других. На самом деле вам нужно протестировать не весь селектор, а последнюю функцию, которая выполняет эту работу. Если нет, то тесты будут дублировать друг друга, так как если у вас есть тесты для селектора1, а селектор1 используется в селекторе2, то автоматически вы тестируете их оба в тестах селектор2.

Чтобы достичь:

• меньше издевательств
• нет необходимости специально издеваться над результатом составных селекторов
• нет дублирования теста

проверить только функцию результата селектора. Он доступен selector.resultFunc.

Так, например:

const selector2 = createSelector(selector1, (data) => ...);

// tests

const actual = selector2.resultFunc([returnOfSelector1Mock]);
const expected = [what we expect];
expect(actual).toEqual(expected)

Резюме

Вместо того, чтобы тестировать всю композицию и дублировать одно и то же утверждение или имитировать выходные данные конкретных селекторов, мы тестируем функцию, которая определяет наш селектор, поэтому последний аргумент в createSelector доступен по клавише resultFunc.

Вы можете добиться этого, издеваясь над всем модулем selectors1.js, но также импортируя его внутри теста, чтобы иметь доступ к издевательской функциональности.

Предполагая, что ваш selectors1.js выглядит как

import { createSelector } from 'reselect';

// selector
const getFoo = state => state.foo;

// reselect function
export const baseSelector = createSelector(
  [getFoo],
  foo => foo
);

и selectors2.js выглядит так

import { createSelector } from 'reselect';
import selectors1 from './selectors1';

export const targetSelector = createSelector(
  [selectors1.baseSelector],
  foo => {
    return foo.a;
  }
);

Затем вы можете написать какой-нибудь тест, например

import { baseSelector } from './selectors1';
import { targetSelector } from './selectors2';

// This mocking call will be hoisted to the top (before import)
jest.mock('./selectors1', () => ({
  baseSelector: jest.fn()
}));

describe('selectors', () => {
  test('foo.a = 1', () => {
    const state = {
      foo: {
        a: 1
      }
    };
    baseSelector.mockReturnValue({ a: 1 });
    expect(targetSelector(state)).toBe(1);
  });

  test('foo.a = 2', () => {
    const state = {
      foo: {
        a: 1
      }
    };
    baseSelector.mockReturnValue({ a: 2 });
    expect(targetSelector(state)).toBe(2);
  });
});

Вызов функции jest.mock будет поднят в верхнюю часть модуля, чтобы имитировать модуль selectors1.js. Когда вы import/require selectors1.js, вы получите фиктивную версию baseSelector, поведение которой вы можете контролировать перед запуском теста.

Для тех, кто пытается решить эту проблему с помощью Typescript, этот пост — это то, что наконец сработало для меня: https://dev.to/terabaud/testing-with-jest-and-typescript-the-tricky-parts-1gnc

Моя проблема заключалась в том, что я тестировал модуль, который вызывал несколько разных селекторов в процессе создания запроса, и созданное мной состояние redux-mock-store не было видно селекторам при выполнении тестов. В итоге я вообще пропустил фиктивное хранилище и вместо этого смоделировал возвращаемые данные для конкретных вызываемых селекторов.

Процесс таков:

• Импортируйте селекторы и зарегистрируйте их как шуточные функции:

    import { inputsSelector, outputsSelector } from "../store/selectors";         
    import { mockInputsData, mockOutputsData } from "../utils/test-data";

    jest.mock("../store/selectors", () => ({
      inputsSelector: jest.fn(),
      outputsSelector: jest.fn(),
    }));

• Затем используйте .mockImplementation вместе с помощником mocked из ts-jest\utils, который позволяет обернуть каждый селектор и дать каждому настраиваемые возвращаемые данные.

    beforeEach(() => {
        mocked(inputsSelector).mockImplementation(() => {
            return mockInputsData;
        });
        mocked(outputsSelector).mockImplementation(() => {
            return mockOutputsData;
        });
    });

• Если вам нужно переопределить возвращаемое значение по умолчанию для селектора в конкретном тесте, вы можете сделать это внутри определения test() следующим образом:

    test("returns empty list when output data is missing", () => {
        mocked(outputsSelector).mockClear();
        mocked(outputsSelector).mockImplementationOnce(() => {
            return [];
        });
        // ... rest of your test code follows ...
    });

Я столкнулся с той же проблемой. Я закончил тем, что издевался над reselect createSelector с jest.mock, чтобы игнорировать все, кроме последнего аргумента (который является основной функцией, которую вы хотите протестировать), когда дело доходит до тестирования. В целом этот подход сослужил мне хорошую службу.

Проблема у меня была

У меня была круговая зависимость в моих модулях выбора. Наша кодовая база слишком велика, и у нас нет пропускной способности для их соответствующего рефакторинга.

Почему я использовал этот подход?

В нашей кодовой базе много циклических зависимостей в селекторах. И пытаться переписать и реорганизовать их, чтобы не было циклических зависимостей, слишком много работы. Поэтому я решил смоделировать createSelector, чтобы не тратить время на рефакторинг.

Если ваша кодовая база для селекторов чиста и свободна от зависимостей, обязательно рассмотрите возможность использования reselect resultFunc. Дополнительная документация здесь: https://github.com/reduxjs/reselect#createselectorinputselectors--inputselectors-resultfunc

Код, который я использовал для насмешки над createSelector

// Mock the reselect
// This mocking call will be hoisted to the top (before import)
jest.mock('reselect', () => ({
  createSelector: (...params) => params[params.length - 1]
}));

Затем для доступа к созданному селектору у меня было что-то вроде этого

const myFunc = TargetSelector.IsCurrentPhaseDraft;

Весь код набора тестов в действии

// Mock the reselect
// This mocking call will be hoisted to the top (before import)
jest.mock('reselect', () => ({
  createSelector: (...params) => params[params.length - 1]
}));


import * as TargetSelector from './TicketFormStateSelectors';
import { FILTER_VALUES } from '../../AppConstant';

describe('TicketFormStateSelectors.IsCurrentPhaseDraft', () => {
  const myFunc = TargetSelector.IsCurrentPhaseDraft;

  it('Yes Scenario', () => {
    expect(myFunc(FILTER_VALUES.PHASE_DRAFT)).toEqual(true);
  });

  it('No Scenario', () => {
    expect(myFunc(FILTER_VALUES.PHASE_CLOSED)).toEqual(false);
    expect(myFunc('')).toEqual(false);
  });
});