Симуляция приложения на клике ничего не делает - Jest / React - PullRequest
0 голосов
/ 10 октября 2019

Я пытаюсь протестировать простое приложение калькулятора, чтобы немного попрактиковаться с энзимом и шуткой. Я попытался сделать несколько тривиальных тестов, например, посмотреть, правильно ли отображает компонент текст, и они сработали. Однако я хочу попробовать более «сложный» тест, в котором, если я щелкну число в калькуляторе, оно будет добавлено в мой компонент результата отображения.

Это мой компонент приложения

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


})

Я знаю, что, вероятно, мне нужно быть более организованным при тестировании, но я просто хотел попробовать, если симуляция щелчка работала правильно. По сути, я хочу смоделировать мой компонент Keypad (который имеет всего 20 кнопок с различным текстом, который будет отображаться в моем окне результатов) и нажать случайную кнопку, скажем, число 7, и когда это произойдет, он должен отобразить текст«7» в моем окне результатов.

Дело в том, что даже когда я симулирую функцию onClick в моем тесте, ничего не происходит, поле результатов все равно имеет «» в качестве текста, вместо «7»как его текст. Не уверен, что я должен сделать, чтобы симуляция кнопок работала полностью.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...