Question

我正在尝试对一个简单的计算器应用程序进行单元测试，以练习一些酶和玩笑。我尝试进行一些琐碎的测试，例如查看组件是否正确显示文本，并且它们已经起作用。但是，我想尝试一个更“复杂”的测试，在该测试中，如果单击计算器中的一个数字，它将被放置在我的显示结果组件中。

这是我的App组件

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import './main.css'
import Keypad from './Keypad'
import ResultBox from './ResultBox'

export default class App extends Component {
  constructor() {
    super()
    this.handleClick = this.handleClick.bind(this)

    this.state = {
      result: ' ',
    }
  }

  handleClick(button) {
    const { result } = this.state

    const buttonNumber = parseInt(button, 10)


    if (!isNaN(buttonNumber)) {
      this.setState({
        result: result + buttonNumber,
      })
    }
  }

  render() {
    const { result } = this.state

    return (
      <div>
        <ResultBox resultText={result} />
        <Keypad onClick={this.handleClick} />
      </div>
    )
  }
}

这是我一直在进行的测试：

describe('Test app functionality', () => {
    // In progress
    test('Can click a button and shows its assigned number', () => {

        // Render app
        const wrapper = shallow(<App />)

        const kpad = wrapper.childAt(1).dive()

        kpad.childAt(4).dive().simulate('click')

        expect(wrapper.childAt(0).dive().text().includes("7")).toBe(true)
    })


})

我知道测试时我应该更有条理，但是我只是想尝试一下点击模拟是否正常工作。基本上我想做的是模拟我的键盘组件（在结果框上模拟要显示的文本有20个按钮，然后单击一个随机按钮，例如数字7），这时应该呈现文本结果框中的“ 7”。

问题是，即使我在测试中模拟onClick函数，也没有任何反应，结果框的文本仍然是“”，而不是文本为“ 7”。不知道该怎么做才能使按钮模拟完全起作用。

模拟应用程序onClick不会执行任何操作-开玩笑/反应

0 个答案: