をenzymeから、そしてsnapshotsをjestから一緒に使用しようとしています。Enzyme Shallow with Jestスナップショットの使用方法
私が直面している問題は、を使用して状態から何かを変更し、その結果をスナップショットと一致させる必要があることです。
は私のコンポーネントのコードを見る
....
getPrevProduct =() => {
const key = this.state.indexCurrent > 0 &&
this.productsKeys[this.state.indexCurrent - 1];
let product = null;
if (key) {
product = this.props.products[key];
}
return product;
}
renderPrev =() => this.getPrevProduct() && <PrevButton />;
render() {
return (
<div>
...
{this.renderPrev()}
...
<div>
)
}
前のコードチェックcurrentIndexで小道具から渡された生成物は、存在する場合。
だから私は状態を変えるために酵素が必要です。そして一致する場合は、<PrevButton />
をレンダリングする必要があります。
私はスナップショットでコンポーネントを一致させたい場合は、このテストでは、次のとおりです。
const nextProps = {
products: {
test: 'test'
}
};
const tree = create(<Component nextProps={nextProps} />).toJSON();
expect(tree).toMatchSnapshot();
しかし、私は状態を変更する必要があります。私はそれをどのようにすることができますか?これは動作しません:
const component = <Component nextProps={nextProps} />;
shallow(component).instance()).instance()
create(component).toJSON()`
私もしてみました:私はまた、次の未完成のコードのような変数にコンポーネントの宣言を保存し、shallow
とcreate
でそれを使用しようとした
it('should render component with prev button',() => {
const nextProps = {
products: {
test: 'test'
}
};
const instance = shallow(<Component nextProps={nextProps} />).instance()
instance.setState({
indexCurrent: 1
});
const tree = create(<Component nextProps={nextProps} />).toJSON();
expect(tree).toMatchSnapshot();
});
運がないenzyme-to-json。
あなたは何をしますか?
使用 '酵素-JSON' を。次に、それを浅い().toJsonと同様のjsonに変換することができます。 –
Fawaz
はい、私は私の質問で言ったように試みましたが、私はこのエラーがありました: ''Slugin.js'から'酵素/ビルド/ RSTTraversal 'モジュールを見つけることができず、その解決策が見つかりませんでした –
https://github.com/adriantoine/enzyme-to-json#install – Fawaz