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);
});

错误：未捕获[错误：在上下文中找不到实用程序。您要么a）忘记将组件树包装在MuiPickersUtilsProvider中；或b）混合导入命名文件和直接文件。建议：使用模块索引中的命名导入。

Answer 1

酶context选项和setContext方法适用于legacy context。

应该以与生产中使用的方式相同的方式模拟Context API。考虑到MuiPickersUtilsProvider在内部使用上下文API，它是：

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

DateFnsUtils可以是实数值或模拟值。

最好在隔离的单元测试中模拟所有不相关的单元，包括第三方模块。这样就不需要MuiPickersUtilsProvider。

Answer 2

我是material-ui-pickers的维护者。

确实，正如@estus所说，需要将组件树包装在MuiPickersUtilsProvider中。因此，我建议在浅层之外创建自己的包装器，该包装器将使用上下文呈现任何组件。例子

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

然后在您的测试中

renderWithContext(<App />)

模拟上下文提供者

2 个答案: