1 | import React from 'react';
|
2 | import { render, fireEvent, cleanup } from '@testing-library/react';
|
3 | import { useToggle } from '..';
|
4 |
|
5 | afterEach(cleanup);
|
6 |
|
7 |
|
8 | const Component = ({ initialToggle = false }) => {
|
9 | const [isToggled, toggle] = useToggle(initialToggle);
|
10 |
|
11 | return (
|
12 | <button type="button" data-testid="toggle-test" onClick={toggle}>
|
13 | {isToggled ? 'Hello' : 'World'}
|
14 | </button>
|
15 | );
|
16 | };
|
17 |
|
18 | describe('useToggle', () => {
|
19 | test('should render "Hello"', () => {
|
20 | const { getByTestId } = render(<Component />);
|
21 |
|
22 | expect(getByTestId('toggle-test').textContent).toEqual('World');
|
23 | });
|
24 |
|
25 | test('should render "World"', () => {
|
26 | const { getByTestId } = render(<Component initialToggle />);
|
27 |
|
28 | expect(getByTestId('toggle-test').textContent).toEqual('Hello');
|
29 | });
|
30 |
|
31 | test('should toggle the state when clicked', () => {
|
32 | const { getByTestId } = render(<Component />);
|
33 |
|
34 | const button = getByTestId('toggle-test');
|
35 |
|
36 | expect(button.textContent).toEqual('World');
|
37 |
|
38 | fireEvent.click(button);
|
39 |
|
40 | expect(getByTestId('toggle-test').textContent).toEqual('Hello');
|
41 | });
|
42 | });
|