mercredi 9 octobre 2019

Simulating app onClick does nothing - Jest/React

I'm trying to unit test a simple calculator app to practice a bit with enzyme and jest. I've tried doing some trivial tests like seeing if a component displays text properly, and they've worked. However, I want to try a more "complex" test, where if I click a number in the calculator, it will be put on my display result component.

This is my App component

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

And this is the test I've been working on:

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


})

I know I should probably be more organized when testing, but I just wanted to try if the click simulation was working properly. Basically what I want to do is simulate my Keypad component (which just has like 20 buttons with different text to be rendered on my result box) and click a random button, say, the number 7, and when this happens it should render the text "7" on my result box.

The thing is, even when I simulate the onClick function on my test, nothing happens, the result box still has a " " as its text, instead of having "7" as its text. Not sure what I'm supposed to do to make the button simulation work completely.

Aucun commentaire:

Enregistrer un commentaire