如何測試一個React組件，隨着時間和Jest和酶一起更新？

Question

我有這個陣營組件

export class Timer extends Component { 

constructor(props) { 
    super(props); 
    this.state = {i : props.i}; 
} 

componentDidMount(){ 
    this.decrementCounter(); 
} 

decrementCounter(){ 
    if(this.state.i < 1){ 
     return; 
    } 
    setTimeout(() => { 
     this.setState({i : this.state.i - 1}) 
     this.decrementCounter()}, 1000); 
} 

render(){ 
    return <span>{this.state.i}</span> 
}} 

我想表達這樣

jest.useFakeTimers(); 
it('should decrement timer ',() => { 
    const wrapper = shallow(<Timer i={10} />); 
    expect(wrapper.text()).toBe("10"); 
    jest.runOnlyPendingTimers(); 
    expect(wrapper.text()).toBe("9"); 
}); 

測試目前國內首家指望通過，但第二個失敗

Expected value to be (using ===): 
     "9" 
    Received: 
     "10" 

我怎樣才能正確地測試這個組件？

Answer 1

使用Full Rendering API, mount(...)

全部DOM渲染是理想的，你必須成分 可能與DOM API的交互，或者可能需要的整個生命週期中 爲了全面測試組件使用情況（即，componentDidMount等）

可以使用mount()，而不是像shallow()

import React from 'react'; 
import { mount, /* shallow */ } from 'enzyme'; 
import Timer from './index'; 

describe('Timer',() => { 
    it('should decrement timer ',() => { 
     jest.useFakeTimers(); 

     const wrapper = mount(<Timer i={10} />); 
     expect(wrapper.text()).toBe("10"); 
     jest.runOnlyPendingTimers(); 
     expect(wrapper.text()).toBe("9"); 

     jest.useRealTimers(); 
    }); 
}); 

或者你也可以通過額外的對象shallow儀器它運行生命週期方法

• see ShallowWrapper.js sourcode
• see shallow() docs

options.disableLifecycleMethods：（Boolean [可選] ）：如果設置爲true，則不會調用 componentDidMount在組件上，並且 componentDidUpdate不會在setProps和setContext之後調用。

const options = { 
    lifecycleExperimental: true, 
    disableLifecycleMethods: false 
}; 

const wrapper = shallow(<Timer i={10} />, options); 

我測試了它。有用。

hinok:~/workspace $ npm test 

> c9@0.0.0 test /home/ubuntu/workspace 
> jest 

PASS ./index.spec.js (7.302s) 
    Timer 
    ✓ should decrement timer (28ms) 

Test Suites: 1 passed, 1 total 
Tests:  1 passed, 1 total 
Snapshots: 0 total 
Time:  8.162s 
Ran all test suites.