渲染子组件时无法设置上下文

Question

我正在尝试使用 Enzyme 测试自定义 Material-ui React 组件，但出现以下错误：

ERROR: 'Warning: Failed context type: Required context 'muiTheme' was not specified in 'ChildComponent'.

我尝试的是根据this 设置上下文。我要访问和测试的组件是子组件。

const root = shallow(<RootComponent />, {context: {muiTheme}, childContextTypes: {muiTheme: React.PropTypes.object}})
const child = root.find(ChildComponent)
child.render() // <--- this line is throwing the error

更新：this is related

Answer 1

我不确定这是否是解决方案，但它离目标更近了一步。

const root = mount(<RootComponent />, {
  context: {muiTheme},
  childContextTypes: {muiTheme: React.PropTypes.object}
})
const child = root.find(ChildComponent)

注意，我使用mount 而不是shallow。问题在于我不能再使用child.find({prop: 'value'}) - 返回 0 个项目...

Answer 2

您需要提供<muiThemeProvider> 组件。

这是一个如何做的例子：

import React from 'react';
import { mount } from 'enzyme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import Input from './Input';

describe('<Input />', () => {
    const mountWithTheme = (node) => mount(<MuiThemeProvider>{node}</MuiThemeProvider>);

    it('calls componentDidMount', () => {
        sinon.spy(Input.prototype, 'componentDidMount');
        mountWithTheme(<Input />);
        expect(Input.prototype.componentDidMount.calledOnce).to.equal(true);
    });
});