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