Search for a command to run...
No comments yet. Be the first to comment.
Every October, the developer community buzzes with Hacktoberfest energy. PRs fly, t-shirts are earned, and GitHub turns green. But here's what nobody talks about: what happens in November? For most contributors, the answer is simple: nothing. The rep...
The debate over AI coding agents is missing the most important factor. It’s not about prompt engineering, it’s about understanding the context window. Developers are divided. One side claims coding agents suck. The other insists you’re just using the...
Learnings from a Research Paper
Lately, I have been working on a feature to capture images from media streams and scale them down to reduce their size. This helps save storage and reduce costs before uploading the images to a storage service. For this, I used Canvas to render the i...
AI helps you do more, but only if you know the basics well enough to tell it what you want.
Testing Custom Hooks in ReactJS: A Step-by-Step Guide
Custom hooks in ReactJS are reusable pieces of code that encapsulate logic and state management. As developers, we need to ensure that these hooks work as intended and do not have any unintended side effects. This is where testing custom hooks becomes crucial.
In this article, we will explore how to test custom hooks in ReactJS using the useClipboard hook as an example.
The useClipboard hook is a simple hook that allows you to copy text to the clipboard. It takes three parameters: the text to copy, the delay (in ms) to switch back to the initial state once copied, and a callback function to execute when the content is copied to the clipboard.
You can read more about how it uses the clipboard API to copy the text here.
import { useCallback, useEffect, useState } from 'react';
const useClipboard = (
value: string,
timeout = 1500,
callBack?: () => void
) => {
const [hasCopied, setHasCopied] = useState(false);
const [valueState, setValueState] = useState(value);
const handleCopy = useCallback(async () => {
try {
await navigator.clipboard.writeText(valueState);
setHasCopied(true);
callBack && callBack();
} catch (error) {
setHasCopied(false);
}
}, [valueState]);
useEffect(() => setValueState(value), [value]);
useEffect(() => {
let timeoutId: number | null = null;
if (hasCopied) {
timeoutId = Number(
setTimeout(() => {
setHasCopied(false);
}, timeout)
);
}
return () => {
if (timeoutId) {
clearTimeout(timeoutId);
}
};
}, [timeout, hasCopied]);
return {
onCopyToClipBoard: handleCopy,
hasCopied,
};
};
We first need to create a test file to begin testing the hook. Let's call it useClipboard.test.tsx. In this file, we'll import the useClipboard hook and any necessary dependencies.
import { renderHook, act } from '@testing-library/react-hooks';
import { useClipboard } from './useClipboard';
renderHook ? 💡renderHook is a function provided by the @testing-library/react-hooks library that allows you to test React hooks in isolation.
It provides a testing environment for React hooks by rendering them in a mock component.
It allows you to test the hook's behavior and state changes in isolation, without the need for a full React component.
It returns an object with a result property that holds the current state of the hook.
Alright, now we know what is renderHook function and how it works.
Next, we'll write our first test to check if the hook returns an object with two properties: onCopyToClipBoard and hasCopied.
it('should return an object with onCopyToClipBoard and hasCopied properties', () => {
const { result } = renderHook(() => useClipboard('test'));
expect(result.current).toHaveProperty('onCopyToClipBoard');
expect(result.current).toHaveProperty('hasCopied');
});
In this test, we render the hook using the renderHook function from @testing-library/react-hooks. We pass in the text we want to copy as the first argument. Then we use the expect function to check if the hook returns an object with the two properties we expect.
Next, we'll write a test to check if the onCopyToClipBoard function updates the hasCopied state.
it('should update hasCopied state when content is copied to clipboard', async () => {
const { result } = renderHook(() => useClipboard('test'));
await act(async () => {
result.current.onCopyToClipBoard();
});
expect(result.current.hasCopied).toBe(true);
});
In this test, we call the onCopyToClipBoard function and use the await keyword to wait for the function to finish executing. We then check if the hasCopied the state is set to true.
Finally, we'll write a test to check if the hasCopied state resets after the timeout.
it('should reset hasCopied state after timeout', async () => {
jest.useFakeTimers();
const { result, rerender } = renderHook(() =>
useClipboard('test', 1500)
);
await act(async () => {
result.current.onCopyToClipBoard();
});
expect(result.current.hasCopied).toBe(true);
act(() => {
jest.advanceTimersByTime(1500);
});
rerender();
expect(result.current.hasCopied).toBe(false);
jest.useRealTimers();
});
In this test, we use the jest.useFakeTimers() function to fake the timer. We render the hook with a delay of 1500ms and call the onCopyToClipBoard function. We then advance the timer by 1500ms and rerender the hook. Finally, we check if the hasCopied state is set to false.
Testing custom hooks in ReactJS is crucial for ensuring the functionality of our components. While it may be challenging at times, with the right approach and tools like @testing-library/react-hooks, we can write effective tests and ensure our hooks work as intended.
And that’s it for this topic. Thank you for reading.
If you found this article useful, please consider liking and sharing it with others. If you have any questions, feel free to comment, and I will do my best to respond.