componentDidMount SETSTATE酵素試験で

Question

コンポーネント反射しない：試験

import React from 'react' 
import request from 'superagent' 

export default React.createClass({ 
    getInitialState() { 
     return {cats: []} 
    }, 

    componentDidMount() { 
     request('/api', (err, res) => { 
      if (err) return; 
      this.setState({ 
       cats: res.body.results 
      }) 
     }) 
    }, 

    render() { 
     let cats = this.state.cats 
     let catsList = (
      <ul> 
       {cats.map((c) => <li key={c.id}>cat</li>)} 
      </ul> 
     ) 
     return (
      <div> 
       hello world 
       {cats.length ? catsList : null} 
      </div> 
     ) 
    } 
}) 

を：

jest.unmock('../app.js') 
jest.unmock('superagent') 

import React from 'react' 
import {mount} from 'enzyme' 
import nock from 'nock' 
import App from '../app.js' 

describe('App',() => { 
    let ajaxFn 
    beforeEach(() => { 
     ajaxFn = nock('http://localhost') 
      .get('/api') 
      .reply(200, { 
       results: [{id: 1}, {id: 2}, {id: 3}] 
      }) 
    }) 

    it('says hello world',() => { 
     let wrapper = mount(<App/>) 
     expect(wrapper.text()).toContain('hello worl') 
    }) 

    it('makes ajax request',() => { 
     let wrapper = mount(<App/>) 
     expect(ajaxFn.isDone()).toBe(true) 
    }) 

    it('renders correct number of cats',() => { 
     let wrapper = mount(<App />) 
     expect(wrapper.state('cats').length).toBe(3) 
    }) 
}) 

第2テストに合格が、最終一つはない、すなわちwrapper.state（ '猫'） .length == 0

私は、setstateがすぐに状態を更新することを保証しないことを理解していますが、私がコンポーネントに 'cats'を記録すると更新がわかります。

Answer 1

酵素が知らない状況でコンポーネントの状態を終了させる場合は、手動で.update()を呼び出して、ラッパーツリーの更新バージョンを取得する必要があります。

it('renders correct number of cats',() => { 
    let wrapper = mount(<App />) 
    expect(wrapper.update().state('cats').length).toBe(3) 
}) 

Answer 2

私は同様の問題を持っていたし、itコールバックからの約束を返すと約束のthen方法で期待をチェックする必要がありました。私は、これは約だと思うあなたの場合

は（ajaxFnが約束したと仮定して、またはあなたが1にそれを回すことができる）：

it('renders correct number of cats',() => { 
    let wrapper = mount(<App />) 
    return ajaxFn.then(() => { 
     expect(wrapper.state('cats').length).toBe(3); 
    } 
})