この機能コンポーネントのテスト方法

Question

このコンポーネントのテストには、karmaとmochaのライブラリexpectを使用してヘルプが必要です。

import React from 'react'; 

import {Clock} from 'Clock'; 
import {CountdownForm} from "CountdownForm"; 
import {Controls} from "Controls"; 

export class Countdown extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     count: 0, 
     countdownStatus: 'stopped' 
    } 
    } 

    componentDidUpdate(prevProps, prevState) { 
    if(prevState.countdownStatus !== this.state.countdownStatus) { 
     switch (this.state.countdownStatus) { 
     case 'started': 
      this.timerID = setInterval(
      this.tick, 
      1000 
     ); 
     break; 
     case 'stopped': 
      console.log('stopped fireeed'); 
      this.setState({count: 0}); 
     case 'paused': 
      console.log('paused fireeed'); 
      clearInterval(this.timerID) 
      this.timerID = undefined; 
      break; 

     } 
    } 
    } 

    componentWillUnmount() { 
    clearInterval(this.timerID) 
    this.timerID = undefined; 
    } 


    handleSetCountdown = (seconds) => { 
    this.setState({ 
     count: seconds, 
     countdownStatus: 'started' 
    }); 

    } 

    tick =() => { 
    console.log('tick fireeeed'); 
    let newMoment = this.state.count - 1; 
    let newState = 'started' 
    if(newMoment === 0) { 
     newState = 'stopped' 
    } 
    this.setState(() => { 
     return { 
      count: newMoment >= 0 ? newMoment : 0, 
      countdownStatus: newState 
     } 
    }) 
    } 

    handleStatusChange = (newStatus) => { 
    this.setState({ 
     countdownStatus: newStatus, 
    }) 
    } 

    render() { 
    const renderControlArea =() => { 
     if(this.state.countdownStatus !== 'stopped') { 
     return <Controls countdownStatus={this.state.countdownStatus} onStatusChange={this.handleStatusChange}/> 
     } else { 
     return <CountdownForm onSetCountdown={this.handleSetCountdown}/> 
     } 
    } 
    const count = this.state.count 
    return (
     <div> 
     <Clock totalSeconds={count}/> 
     {renderControlArea()} 
     {/* <CountdownForm onSetCountdown={this.handleSetCountdown}/> */} 
     </div> 
    ); 
    } 
} 


const Controls = (props) => { 
    const renderStartStopButton = (countdownStatus) => { 
    if(countdownStatus === 'started') { 
     return <button className="button secondary" onClick={() => props.onStatusChange('paused')}>Pause</button> 
    } 
    else if (countdownStatus === 'paused'){ 
     return <button className="button primary" onClick={() => props.onStatusChange('started')}>Start</button> 
    } 
    } 

    return (
    <div className="controls"> 
     {renderStartStopButton(props.countdownStatus)} 
     <button className="button alert hollow" onClick={() => props.onStatusChange('stopped')}>Clear</button> 
    </div> 
) 
} 

export {Controls} 

私はこのようなことを試みましたが、うまくいかなかったため、countdownStatusが渡されたときに関数が呼び出されたかどうかをテストする必要があります。ここでエラーlogがある：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import expect from 'expect'; 
import $ from 'jQuery'; 
import TestUtils from 'react-addons-test-utils'; 

import { Controls } from "Controls" 

describe('Controls',() => { 
    it('should exist',() => { 
    expect(Controls).toExist() 
    }); 

    describe('render',() => { 
    it('should render pause button when started',() => { 
     var controls = TestUtils.renderIntoDocument(<Controls countdownStatus={'started'}/>); 
     var $el = $(ReactDOM.findDOMNode(controls)); 
     var $PauseBtn = $el.find('button:contains(Pause)'); 

     expect($PauseBtn.length).toBe(1); 
    }); 

    it('should render start button when paused',() => { 
     var controls = TestUtils.renderIntoDocument(<Controls countdownStatus={'paused'}/>); 
     var $el = $(ReactDOM.findDOMNode(controls)); 
     var $StartBtn = $el.find('button:contains(Start)'); 

     expect($StartBtn.length).toBe(1); 
    }); 

    }); 

}) 

Answer 1

さて、問題は、それが制御機能から返されてしまった前に、私はドキュメントにノードではないということでした。私はそれを理解しました。誰かが同様の問題に対処している場合に備えて、あなたは関数をテストしていないことを覚えておいてください。

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import expect from 'expect'; 
import $ from 'jQuery'; 
import TestUtils from 'react-addons-test-utils'; 

import { Controls } from "Controls" 

describe('Controls',() => { 
    it('should exist',() => { 
    expect(Controls).toExist() 
    }); 

    describe('render',() => { 
    it('should render pause button when started',() => { 
     var controls = TestUtils.renderIntoDocument(Controls({countdownStatus:'started'})); 
     var $el = $(ReactDOM.findDOMNode(controls)); 
     var $PauseBtn = $el.find('button:contains(Pause)'); 

     expect($PauseBtn.length).toBe(1); 
    }); 

    it('should render start button when paused',() => { 
     var controls = TestUtils.renderIntoDocument(Controls({countdownStatus:'paused'})); 
     var $el = $(ReactDOM.findDOMNode(controls)); 
     var $StartBtn = $el.find('button:contains(Start)'); 

     expect($StartBtn.length).toBe(1); 
    }); 

    }); 

})