Материал-UI + энзим: мелкие компоненты рендеринга?

Я работаю над обновлением своего приложения до последней версии React, Enzyme and 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
    })
});
Я думал, что простая упаковка моего компонента должна была сработать. Очевидно, я где-то пропустил шаг. Может ли кто-нибудь указать мне на правильный путь? направление?
1 4
reactjs material-ui

1 ответ:

Вам нужно использовать mount в этом случае shallow отображает компонент только на один уровень глубже, поэтому он не будет отображать детей таким образом, попробуйте это: 

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