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のみ、コンポーネント1のレベルが深いレンダリング、これを試してみてください。

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