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

嗯，问题是在从Control函数返回之前我无法进入文档节点。我想通了，以防万一有人正在处理类似的问题请记住你正在测试函数而不是类这里是修复问题的代码

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);
    });

  });

})

如何测试这个功能组件

1 个答案: