Material-UI + 酶：浅渲染组件？

Question

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

我知道在版本 15 中，Material-UI 删除了默认主题组件，如果给定 none 则会创建。现在首选的方法是用我们想要使用的样式的 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只渲染组件深一层，所以它不会渲染children，试试这个：

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

Material-UI + 酶：浅渲染组件？

Material-UI + Enzyme: Shallow Rendering components?

reactjs

material-ui

enzyme