Material-UI + Enzyme:浅层渲染组件？

Question

我正在努力将我的应用程序更新到最新版本的React,Enzyme和Material-UI.

我知道,对于版本15,如果没有给出Material-UI,则会删除默认主题组件.现在首选的方法是MuiThemeProvider使用我们想要使用的样式的组件包装整个应用程序.这没有任何障碍,但我的测试现在打破他们不应该.

使用Material-UI组件和我调用的任何组件ShallowWrapper.html()现在将使我的测试失败并显示以下消息:TypeError: Cannot read property 'prepareStyles' of undefined.

请注意,如果我不使用ShallowWrapper.html(),我不会收到任何错误.所以只有当我需要看到HTML输出失败时才会这样.这是有道理的,Material-UI应该只关注实际渲染时的样式.

我创建了一个非常简单的测试用例来展示我是如何做到的:

import * as React from 'react'
import * as chai from 'chai'
import chaiEnzyme = require('chai-enzyme')
import { shallow } from 'enzyme'
import Avatar from 'material-ui/Avatar'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'

chai.use(chaiEnzyme());
let expect = chai.expect;

describe('Unit Test', () => {
    it(`Should work`, () => {
        let shallowComponent = shallow(
            <MuiThemeProvider>
                <Avatar src='foo.jpg' />
            </MuiThemeProvider>
        );
        expect(shallowComponent.html()).to.exist
    })
});

我想只是包装我的组件应该工作.显然,我在某个地方错过了一步.有人能指出我正确的方向吗？

Answer 1

mount在这种情况下你需要使用,shallow只将组件渲染一层深,所以它不会那样渲染子,试试这个:

describe('Unit Test', () => {
    it(`Should work`, () => {
        let shallowComponent = mount(
            <MuiThemeProvider>
                <Avatar src='foo.jpg' />
            </MuiThemeProvider>
        );
        expect(shallowComponent.html()).to.exist
    })
});