Требовать из фактического файла, используя NormalModuleReplacementPlugin

Question

У меня есть Storybook , для которого мне нужно, чтобы дочерние компоненты моего компонента React прекратили выполнять вызовы API.Настройка довольно сложна, и это также не имеет отношения к вопросу, поэтому я просто скажу, что мне нужны компоненты, чтобы перестать делать вызовы API.

Моя конечная цель состоит в том, чтобы дочерний компонент оставался в «состоянии загрузки» навсегда, поэтому насмешка над ответом сервера здесь не является решением .

Подход, который я придумал, состоял в том, чтобы заменить создателей Thunk action на сперму.Подобно тому, что мы делаем в модульных тестах Jest

// note that I'm using redux ducks: https://github.com/erikras/ducks-modular-redux

jest.mock('./ducks/students');

Конечно, вышеописанное не работает, поскольку Storybook не работает на Jest.Поэтому мой текущий подход заключается в использовании NormalModuleReplacementPlugin для замены реального модуля ducks/students.js на заглушенный ducks/stubs/students.js, который содержит функции, но с пустым телом:

// ./ducks/students.js
export const loadResources() = fetch('/resources');

export default (state, actions => {
  // reducer's body
}


// ./ducks/stubs/students.js
export const loadResources() = Promise.resolve();  // STUBBED

export default (state, actions => {
  // reducer's body
}

Проблема в том, что мне нужно только создать создатель thunk action, все остальное в файле (другие действия и редуктор) должны быть одинаковыми.

Это подходы, которые я рассмотрел до сих пор, чтобы исправитьэто:

• Скопируйте / вставьте оставшуюся часть фактического файла в заглушку.Это не будет масштабироваться.
• Попытка использовать require.requireActual().Оказывается, это пользовательская функция Jest, поэтому я не могу использовать ее в сборнике рассказов.

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

Любые идеи, как я могу получить доступ к фактическому модулю из заглушки, когда я использую NormalModuleReplacementPlugin?

Обновление 1: 2019-07-08

Предложение Таруна о том, чтобы просто насмехаться над функцией выборки и возвращать new Promise(), сработало для особого случая "бесконечной загрузки".

Однако, глядя на общую картину, яЯ бы все-таки предпочел просто заглушить все вызовы API, чтобы я мог настроить истории, просто изменив состояние избыточности.

"Но почему вы не можете просто посмеяться над ответом JSON?"Я слышал, вы спрашиваете.Ответ JSON не обязательно является взаимно-однозначным отображением с моделью домена приложения.У нас есть функции картографирования, которые заботятся о преобразовании.

Было бы лучше, если бы программисты могли работать и настраивать тестовые случаи только на основе знания модели предметной области, и не нужно знать ответ сервера JSONсостав.Излишне говорить, что структура хранилища приложений - это модель предметной области.

Поэтому мне все еще нужен ответ о том, как запрашивать фактический файл при использовании NormalModuleReplacementPlugin.

Answer 1

Я не проверял это, но вы можете достичь того, что вам нужно, с помощью синтаксиса Агрегирование / реэкспорт модулей и перезаписи вашей функции loadResources().

Для этого импортируйте свой фактический модуль в ./ducks/stubs/students.js, экспортируйте все из этого модуля, затем определите / перезаписайте loadResources() и экспортируйте его также. Затем вы можете использовать NormalModuleReplacementPlugin в обычном режиме и передать в свой файл-заглушку как newResource, который будет содержать все ваши действительные редукторы / действия модуля, которые вы хотели сохранить с перезаписанным и заглушенным блоком:

//ducks.stubs.students.js

export * from './ducks/students.js';

//override students.loadResources() with our stub
//order matters as the override must come after 
//the export statement above
export const loadResources() = //some stubbed behavior;

//webpack.config.js

module.exports = {
  plugins: [
    new webpack.NormalModuleReplacementPlugin(
      /ducks\.students\.js/,
      './ducks.stubs.students.js'
    )
  ]
}

Несколько замечаний / предостережений / ошибок с этим решением:

1. Вы можете обновить ваш экспорт, чтобы использовать let против const (не имеет значения)
2. По этой проблеме , выражение export * from не должно обрабатывать default экспорта. Таким образом, вам, возможно, придется добавить export { default } from './ducks/students.js';. Конечно, имейте в виду, что вы не сможете экспортировать функцию по умолчанию, встроенную в файл-заглушку (если вы не переопределите исходную функцию default с помощью заглушки, конечно).