模拟上下文提供者答案

【问题标题】：Mock context provider模拟上下文提供者
【发布时间】：2019-07-10 19:53:38
【问题描述】：

我正在尝试测试使用来自提供者组件的上下文的组件。

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

我尝试过以这种方式设置上下文，但它仍然抱怨找不到上下文工具。应用测试

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

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

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

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

【问题讨论】：

标签： reactjs jestjs material-ui enzyme

【解决方案1】：

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

真的，正如@estus 所说，需要将组件树包装在MuiPickersUtilsProvider 中。所以我建议在浅层之外创建自己的包装器，它将渲染任何带有上下文的组件。示例

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

然后在你的测试中

renderWithContext(<App />)

【讨论】：

【解决方案2】：

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

上下文 API 应该像在生产环境中使用一样被模拟。考虑到 MuiPickersUtilsProvider 在内部使用上下文 API，它是：

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

其中DateFnsUtils 可以是真实值或模拟值。

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

【讨论】：