← All tasksReact · Junior

Counter

Write a Counter component. It shows a number in an element with data-testid="count" and has two buttons: - decreases the number by one and + increases it.

The initial value comes in the initial prop (0 by default). Hooks (useState and others) are available without imports.

function Counter({ initial = 0 }) {
  // ...
  return null;
}

Ctrl+Enter runs the tests. Tab indents; to leave the editor with the keyboard, press Esc and then Tab. Your code is saved in this browser.

Tests (4)

render(<Counter />);
expect(screen.getByTestId('count').textContent).toBe('0');

render(<Counter />);
fireEvent.click(screen.getByRole('button', { name: '+' }));
fireEvent.click(screen.getByRole('button', { name: '+' }));
expect(screen.getByTestId('count').textContent).toBe('2');

render(<Counter />);
fireEvent.click(screen.getByRole('button', { name: '-' }));
expect(screen.getByTestId('count').textContent).toBe('-1');

render(<Counter initial={10} />);
fireEvent.click(screen.getByRole('button', { name: '+' }));
expect(screen.getByTestId('count').textContent).toBe('11');