Макет провайдера контекста - PullRequest
0 голосов
/ 17 февраля 2019

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

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;или б) смешанный именной и прямой импорт файлов.Рекомендация: используйте именованный импорт из индекса модуля.

Ответы [ 2 ]

0 голосов
/ 21 февраля 2019

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

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

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

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

renderWithContext(<App />)
0 голосов
/ 17 февраля 2019
Опция

Фермент context и метод setContext предназначены для унаследованного контекста .

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

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

, где DateFnsUtils может быть либо действительным, либо поддельным значением.

Желательно смоделировать все нерелевантные модули в изолированных модульных тестах., в том числе сторонние модули.В этом случае MuiPickersUtilsProvider не понадобится.

...