私は、React、Enzyme、およびMaterial-UIの最新バージョンに私のアプリをアップデートしています。Material-UI + Enzyme:浅いレンダリングコンポーネント?
バージョン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
})
});
私は単に私のコンポーネントが動作するようになったラップと思いました。明らかに、私はどこかのステップを欠いている。誰かが私を正しい方向に向けることができますか?
多くのおかげで、私は絶対に困惑した理由私のテストをMaterial-uiで失敗し、問題のconsole.log(wrapper.html())行が見つかりました。これを削除すると、記述したエラーはなくなります。 –