Заметки про React(@ru_react_notes). Создаем функцию контекста в JavaScript React популяризировал идею распространения значений через ко

Создаем функцию контекста в JavaScript React популяризировал идею распространения значений через контекст, с помощью которого можно избавиться от проп-дриллинга и синхронизировать состояние компонента в разных частях приложения. Хотя вариант использования контекста в UI фреймворках очевиден, потребность подобного API существует и не только в UI фреймворках. Создадим свою версию Context API для фреймворка юнит тестирования:

describe('calculator: Add', () => {
  it("Should correctly add two numbers", () => {
    expect(add(1, 1)).toBe(2);
  });
});

После успешного прохождения теста в консоль должна выводиться запись: “calculator: Add > ✅ Should correctly add two numbers”. Для того, чтобы это сообщение вывелось, нам нужно как-то прокинуть описание describe в функцию it. Для этого нам поможет концепция контекста. Эвятар Алуш в своей статье на Smashing Magazine поделился своей реализацией контекста, которую он использовал в библиотеке для валидации форм Vest.

function createContext() {
  let contextValue = undefined;

  function Provider(value, callback) {
    contextValue = value;
    callback();
    contextValue = undefined;
  }

  function Consumer() {
    return contextValue;
  }

  return {
    Provider,
    Consumer
  }
}