Question

我是开玩笑和测试组件的新手

我在没有经过测试的情况下表现良好。

然而，我发现迫切需要进行测试，我试图制作一个。

案例：

我有两个名为＆＃39; Audio＆＃39;＆＃39; Pad＆＃39;和包装组件＆＃39;布局＆＃39;。

它们的工作原理如下：如果点击了pad，音频在收到道具时会发出声音（isAudible）。

这是Audio.jsx：

class Audio extends React.Component {

componentWillReceiveProps () {
    this.audio.play()
}

render () {
    return (
        <audio src={mp3s[0]} preload="auto" ref={ref => { this.audio = ref }}></audio>
    ) 
  }
}

另外一个有4个垫的垫子由风格（样式组件）组成：

class Pads extends React.Component {
    render () {
        return (
            <Flexboard>
                <Pad onClick={this.props.onClick} color={colors.red} className="top-left" />
                <Pad onClick={this.props.onClick} color={colors.blue} className="top-right"/>
                <Pad onClick={this.props.onClick} color={colors.yellow} className="bottom-left"/>
                <Pad onClick={this.props.onClick} color={colors.green} className="bottom-right"/>
            </Flexboard>
        )
    }
}

最后我的布局组件：

class Layout extends React.Component {
    constructor (props) {
        super(props)
        this.state = {
            isAudible: false
        }
    }

    turnOn () {
        this.setState(prev => ({ isAudible: !prev.isAudible }))
    }

    render () {
        return (
            <div>
                <Pads onClick={ e => this.turnOn(e) } />
                <Audio isAudible={ this.state.isAudible }/>   
            </div>
        )
    }
}

如何进行一些简单的测试，以确保它们能够像我期望的那样正常工作：＆＃39;音频在收到名为isAudible＆＃39;？

的道具时播放

我已经执行了这个应用程序并且音频效果很好，所以我想知道的是如何为这种情况编写component.test.js。

使用jest来测试反应组件和事件

0 个答案: