ReactJS Jest Tesing - fireEvent.click() not triggering a button - reactjs

Question

I am doing testing first time in my life. I have a stopwatch app, and I want to check with test is secondmeter running. I am doing it by triggering the button and check is 00:00:00 still there.
Problem is those 00:00:00 are still in the span after triggering a button. Program working completely fine, not any problem at all. Where is the problem with this triggerin?
I have a button START for that:
class SecondTimer extends React.Component {
constructor(props) {
super(props);
this.state = {
running: false, // Format to false, so when start a program clock is not running
currentTimeMs: 0,
currentTimeSec: 0,
currentTimeMin: 0,
};
}
start = () => {
if (!this.state.running) {
this.setState({ running: true });
this.watch = setInterval(() => this.pace(), 10);
}
};
{this.state.running === false && (
<Button className={"start-stop-reset-nappi"} variant="success" size="lg" onClick=
{this.start}>START</Button>
)}
And I have span where time showing (value before starting is 00:00:00, picture of that below).
<span>
{this.props.formatTime(this.props.currentTimeMin)}:
{this.props.formatTime(this.props.currentTimeSec)}:
{this.props.formatTime(this.props.currentTimeMs)}
</span>
Then I have this test:
import { render, screen, fireEvent } from '#testing-library/react';
import SecondTimer from '../components/SecondTimer.jsx';
test('Test - Secondmeter running or not', () => {
render(<SecondTimer />);
const start = screen.getByText("START") // Here I'll check is there button (text) like START
fireEvent.click(start); // Then I "Click" it
const numbers = screen.getByText(/00:00:00/i) // Check is the 00:00:00 still on screen after triggering the button
expect(numbers).toBeInTheDocument()
});
Complete component code:
import React from 'react';
import SecondTimerNumbers from './SecondTimerNumbers.jsx';
import SecondTimerList from './SecondTimerList.jsx';
import { Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
class SecondTimer extends React.Component {
constructor(props) {
super(props);
// Start funktio määrittää running arvon -> true, joka kertoo sen, että kello käy. Tallentaa tänne ajan, josta SeconTimerNumber hakee tiedon
this.state = {
running: false, // Alustettu falseksi, eli ohjelman avatessa kello ei käy
currentTimeMs: 0,
currentTimeSec: 0,
currentTimeMin: 0,
};
}
// Muuttaa kelloajan numeraaliset luvut stringiksi, sekä lisää yhdet nollat lukuun, jotta luvut ei ns. pompi silmillä.
formatTime = (val, ...rest) => {
let value = val.toString();
if (value.length < 2) {
value = '0' + value;
}
if (rest[0] === 'ms' && value.length < 3) {
value = '0' + value;
}
return value;
};
// Start napista painalla käynnistää tämän funktion. Muuttaa state running trueksi, eli kello käy. SetInterval on Reactin oma sekuntikello, ja this.pace 10 määrittelee sadasosasekunnit
start = () => {
if (!this.state.running) {
this.setState({ running: true });
this.watch = setInterval(() => this.pace(), 10);
}
};
// Stop painikkeesta muuttaa running staten falseksi -> kello pysähtyy, sekä tyhjentää sekuntikellon (pysäyttää).
stop = () => {
this.setState({ running: false });
clearInterval(this.watch);
};
// Määrittelee kellon toiminnan
pace = () => {
this.setState({ currentTimeMs: this.state.currentTimeMs + 10 }); // Lisää 10ms kerrallaan
// Kun millisekunteja 1000, lisää yhden sekunnin, sekä muuttaa millisekuntien arvoksi 0 kierroksen jälkeen
if (this.state.currentTimeMs >= 1000) {
this.setState({ currentTimeSec: this.state.currentTimeSec + 1 });
this.setState({ currentTimeMs: 0 });
}
// Kun sekunteja on 60, lisää yhden minuutin, sekä muuttaa sekuntien arvoksi 0 kierroksen jälkeen
if (this.state.currentTimeSec >= 60) {
this.setState({ currentTimeMin: this.state.currentTimeMin + 1 });
this.setState({ currentTimeSec: 0 });
}
};
// Määrittää (resetoi) staten allaolevat arvot nollaksi, jolloin sekuntikello voidaan taas aloittaa alusta
resetTime = () => {
this.setState({
currentTimeMs: 0,
currentTimeSec: 0,
currentTimeMin: 0,
});
};
// UserInterface eli käyttöliittymä renderöityy tässä
render() {
return (
<div className={'main-div'}>
<div className={'left'}>
{this.state.running === false && (
<Button className={"start-stop-reset-nappi"} variant="success" size="lg" onClick={this.start}>START</Button>
)}
{this.state.running === true && (
<Button className={'start-stop-reset-nappi'} variant="warning" size="lg" onClick={this.stop}>PAUSE</Button>
)}
<Button className={'start-stop-reset-nappi'} variant="danger" size="lg" onClick={this.resetTime}>RESET</Button>
<div className={'tulostaulu-main'}>
<SecondTimerNumbers
ref="display"
{...this.state}
formatTime={this.formatTime}
/>
</div>
</div>
<div className={'right'}>
<SecondTimerList clickResetTime={this.resetTime} {...this.state} formatTime={this.formatTime} />
</div>
</div>
);// Yllä oleva ClickResetTime funktio on tämän sivut resetTime funktio.
// Tällä saan kutsuttua funktiota toisesta componentista, tavallaan "injektoin" funktion tähän componenttiin.
}
}
export default SecondTimer;

Answer 1

I don't really know what is your problem with your test. I've created a small test based on your current one which works really well.
The idea of the test is pretty simple. As I clicked the button, I expect to see the change in seconds. The key thing is to use waitFor api with a specified timeout option to make sure testing library resolving your UI change.
Here is the snippet:
import React from "react";
import { render, screen, fireEvent, waitFor } from "#testing-library/react";
import "#testing-library/jest-dom";
import { SecondTimer } from "./App";
test("should work", async () => {
render(<SecondTimer />);
const start = screen.getByText("START");
fireEvent.click(start);
await waitFor(() => screen.getByText(/00:02:00/i), {
timeout: 2000 // wait 2s
});
const numbers = screen.getByText(/00:02:00/i);
expect(numbers).toBeInTheDocument();
});
Here is the codesanbox which I've created exclusively for you (The setup to make the test able to run is based on create-react-app script):
https://codesandbox.io/s/morning-browser-92uks?file=/src/App.test.js
NOTE: To run the test, you click a Tests tab next to Browser on the preview area.