Enzyme Shallow with Jestスナップショットの使用方法

Question

をenzymeから、そしてsnapshotsを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。

あなたは何をしますか？

Answer 1

試行錯誤の末、酵素にはgetRenderOutputと呼ばれる方法が書かれていない（または見つからなかった）ことがわかりました。

その方法私はそれを行うことができるようにJSON形式でコンポーネントを返します。

it('should render component with prev button',() => { 
    const nextProps = { 
    products: { 
     test: 'test' 
    } 
    }; 
    const render = shallow(mockComponent(nextProps)) 
    const instance = render.instance(); 

    instance.setState({ 
    indexCurrent: 1 
    }); 

    const tree = render.renderer.getRenderOutput(); 

    expect(tree).toMatchSnapshot(); 
}); 

私は酵素と冗談からスナップショットを使用する方法です。

getRenderOutputの唯一の問題は、コンソールログを置くと2回印刷されるということです。 instance()とgetRenderOutput()の両方がテストを起動するからです。

これは、スナップショットの出力です：

exports[`ProductNavigator should render component with prev button 1`] = ` 
    <div> 
    <FloatingActionButton 
     className="NavigatorButton left" 
     onTouchTap={[Function]} 
     secondary={true} 
    > 
     <KeyboardArrowLeft /> 
    </FloatingActionButton> 
    </div> 
`; 

誰かがそれを行うには良い方法を知っている場合、コメントを追加してください。

ありがとうございます！

Answer 2

恐らく、その方法はenzyme-to-jsonであると考えられます。この方法を試してください：あなたのテストで

import { shallowToJson } from 'enzyme-to-json'; 
import { shallow } from 'enzyme'; 

、その後を：

const wrapper = shallow(<Component />); 
expect(shallowToJson(wrapper)).toMatchSnapshot();