Макет провайдера контекста

Question

Я пытаюсь проверить компонент, который использует контекст из компонента поставщика.

import { MuiPickersUtilsProvider } from 'material-ui-pickers';
import DateFnsUtils from '@date-io/date-fns';
render((
  <MuiPickersUtilsProvider utils={DateFnsUtils}>
    <App />
  </MuiPickersUtilsProvider>
), document.getElementById('root'));

Я попытался установить контекст таким образом, но он все еще жалуется, что контекстные утилиты не найдены. AppTest

it('renders App Component', () => {
    const context = { utils: DateFnsUtils };

    const wrapper = shallow(<App/>, { context });

    expect(wrapper.find(App)).toHaveLength(1);
});

Ошибка: Uncaught [Ошибка: не удается найти утилиты в контексте. Вы либо: а) забыли обернуть дерево компонентов в MuiPickersUtilsProvider; или б) смешанный именной и прямой импорт файлов. Рекомендация: используйте именованный импорт из индекса модуля.

Answer 1

Я поддерживаю material-ui-pickers,

Действительно, как сказал @estus, необходимо обернуть дерево компонентов в MuiPickersUtilsProvider, Поэтому я предлагаю создать свою собственную обертку вне мелководья, которая будет рендерить любые компоненты с контекстом. пример

const renderWithContext = (renderedNode) => render(
  <MuiPickersUtilsProvider utils={DateFnsUtils}>
    {renderedNode}
  </MuiPickersUtilsProvider>
)

А потом в ваших тестах

renderWithContext(<App />)

Answer 2

Энзим context вариант и setContext Метод для унаследованного контекста.

Предполагается, что Context API должен быть смоделирован так же, как и в производстве. Учитывая, что MuiPickersUtilsProvider использует контекстный API внутри, это:

const wrapper = shallow(
  <MuiPickersUtilsProvider utils={DateFnsUtils}>
    <App />
  </MuiPickersUtilsProvider>
);

куда DateFnsUtils может быть реальным или поддельным значением.

Желательно макетировать все ненужные модули в изолированных модульных тестах, включая сторонние модули. Сюда MuiPickersUtilsProvider не будет необходимости