Snippet

Simulating Button Click Events in Component Tests

Component tests verify user interactions by rendering components in a virtual DOM and firing synthetic events. 'fireEvent.click' simulates user clicks and triggers internal state updates for assertion.

snippet.js

javascript

import { render, fireEvent } from '@testing-library/react';
import React, { useState } from 'react';
 
function Counter() {
  const [val, setVal] = useState(0);
  return <button onClick={() => setVal(val + 1)}>Count: {val}</button>;
}
 
test('increments value on user click', () => {
  const { getByText } = render(<Counter />);
  const button = getByText('Count: 0');
  fireEvent.click(button);
  expect(button.textContent).toBe('Count: 1');
});

react

Breakdown

const { getByText } = render(<Counter />);

Renders the Counter component and extracts the helper method to query elements by visible text.

fireEvent.click(button);

Simulates a user click event on the targeted button element.

expect(button.textContent).toBe('Count: 1');

Asserts that the text content of the button updated to reflect the incremented counter state.

Previous snippet Next snippet

More Beginner JavaScript exercises →

Simulating Button Click Events in Component Tests

Related