You don’t need DOM test

const Counter = () => {
const [counter, setCounter] = useState(0);
const onClick = () => {
setCounter(counter + 1);
};
return (
<button id='btn' onClick={onClick}>
{counter}
</button>
);
};
it('can increment the counter', () => {
render(<Counter />);
const btn = screen.getByRole('button');
expect(btn).toHaveTextContent('0');
fireEvent.click(btn);
expect(btn).toHaveTextContent('1');
});
const useCounter = () => {
const [counter, setCounter] = useState(0);
const onIncrementClick = () => {
setCounter(counter + 1);
};
return { onIncrementClick, counter };
};
const Counter = () => {
const { counter, onIncrementClick } = useCounter();
return (
<button id='btn' onClick={onIncrementClick}>
{counter}
</button>
);
};
it('can increment the counter', () => {
const { result } = renderHook(() => useCounter());
expect(result.current.counter).toBe(0); act(() => {
result.current.onIncrementClick();
});
expect(result.current.counter).toBe(1);
});
const Page = () => {
const onSubmit = (data) => {
// 1. patch data to server
// 2. validate address
// if address is valid,
// go to page 1
// otherwise
// go to page 2
};
return <div onSubmit={onSubmit}>...</div>;
};
const useSubmit = () => {
const { sendData } = useSendData();
const { validateAddress } = useAddressValidation();
const { navigate } = useNavigate();
const submit = (data) => {
await sendData(data);
const isValidAddress = validateAddress(data.address);
if (isValidAddress) {
navigate('page1');
} else {
navigate('page2');
}
};
return { submit };
};
it('should patch data', () => {
const sendDataMock = jest.fn();
jest.spyOn(useSendDataModule, 'useSendData').mockImplementation(() => {
return {
sendData: sendDataMock,
};
});
const { result } = renderHook(() => useSubmit());
const mockData = { address: { city: 'Boston' } };
act(() => {
result.current.submit(mockData);
});
expect(sendDataMock).toHaveBeenCalledWith(mockData);
});
it('should navigate to page 1 if address is valid', () => {
const validateAddressMock = jest.fn().mockImplementation(() => true);
jest.spyOn(useAddressValidationModule, 'useAddressValidation').mockImplementation(() => {
return {
validateAddress: validateAddressMock,
};
});
const navigateMock = jest.fn();
jest.spyOn(useNavigateModule, 'useNavigate').mockImplementation(() => {
return {
navigate: navigateMock,
};
});
const { result } = renderHook(() => useSubmit());
const mockData = { address: { city: 'Boston' } };
act(() => {
result.current.submit(mockData);
});
expect(validateAddressMock).toHaveBeenCalled();
expect(navigateMock).toHaveBeenCalledWith('page1');
});

--

--

--

Software Engineer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Tips For Using Async/Await in JavaScript

The Treehouse Journey (Part 4): Interactive Photo Gallery

Animate a Better Experience with Tab Navigation and React-spring.

Webpack: Zero To Production (Part 1)

How To Setup Bulma-Components In React

Bulma Example of tab and horizontal navigation menu

How Tiny & Powerful Vue.js Helps to Keep the Front-End Code Clean (Actual Web App Demonstrations)

“useReducer”: A more powerful State Management hook in React

Create scripts in JavaScript with zx

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Steve Mu

Steve Mu

Software Engineer

More from Medium

BDD Addict Newsletter 2022 March #57

How Fever has speed-up e2e execution time by 16.5% using Cypress and Github Actions.

A Tiny Introduction of CI/CD

Why you need to test before and during your Oracle EBS to Cloud migration