reactjs - 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
    })
});

コンポーネントをラップするだけでうまくいくはずだと思っていました。明らかに、私はどこかでステップを逃しています。誰かが私を正しい方向に向けることができますか?