preface

In previous articles, we’ve looked at various common component tests, various user actions, mocks, and so on. In our actual development, in addition to components, we will also write some custom hooks, for these custom hooks we can also write corresponding single test, this article we will write about hook single test

The new hook

We still use the previous project, in the project to create a hook directory, to place our custom hook, here implemented a hook similar to Arco Design useCheckbox

cd src
mkdir hooks
cd hooks
touch useCheckbox.ts
Copy the code

useCheckbox.ts

import { useState } from 'react'; export default function useCheckbox<T>( values: T[], checkboxKey: keyof T, defaultSelected? : T[],) {// const [selected, setSelected] = useState<T[]>(defaultSelected?? []); Function isSelected(checkItem: T) { return selected.some(item => { return item[checkboxKey] === checkItem[checkboxKey]; }); } function isAllSelected() {return values. Every (item => isSelected(item)); Function isPartialSelected() {const checkHasSelected = values.some(item => isSelected(item)); Return checkHasSelected &&! isAllSelected(); } function selectAll() {setSelected(values); } function unSelectAll() {setSelected([]); } return { selected, setSelected, isAllSelected, isPartialSelected, selectAll, unSelectAll, isSelected, } }Copy the code

Checkbox (checkbox, checkbox, checkbox, checkbox, checkbox

Add the dependent

To write a single test for hooks we need to add @testing-library/react-hooks, which we didn’t include, now we will

pnpm add @testing-library/react-hooks
Copy the code

Write a single measurement

We will keep the same style as before, which is to create a new __tests__ directory in the hooks directory and place our single test usecheckbox.test.ts

import useQueryCheckbox from '.. /useCheckbox'; import { renderHook } from '@testing-library/react-hooks'; interface MockCheckboxItemProps { key: string; value: string; } function generateCheckboxList(endIndx: number, startIndex = 1) {const defaultCheckboxList: MockCheckboxItemProps[] = []; for (let i = startIndex; i <= endIndx; i++) { defaultCheckboxList.push({ key: `${i}`, value: `mock-${i}`, }); } return defaultCheckboxList; } describe('hook useQueryCheckbox', () => { it('should return the total selected item', () => { const checkboxList = generateCheckboxList(8); const { result } = renderHook(() => useQueryCheckbox(checkboxList, 'key')); const { selected } = result.current; expect(selected).toEqual([]); }); it('should return the total default selected item', () => { const checkboxList = generateCheckboxList(8); const { result } = renderHook(() => useQueryCheckbox(checkboxList, 'key', checkboxList), ); const { selected } = result.current; expect(selected).toEqual(checkboxList); }); });Copy the code

For a quick rundown, we need to use the renderHook API to provide the environment for hook operation. Then we can operate the hook as normal hook operation. Here we only simulate the initialization scene, and finally assert our selected. The rest of the single-test logic is pretty much the same as in our previous article, and there are only two use cases as examples. Let’s run it

pnpm test -- src/hooks/__tests__/useCheckbox.test.ts
Copy the code

You can see that the operation passed and our hook single test has reached this point

At the end

Mock plays a very important role in single test. This article gives a brief introduction and practice. You can check the official API of JEST for mock apis, and there are many related apis

Series of articles: Learn how to use the React component. Learn how to use the React component. Use fireEvent Front-end single test learning (5) – Snapshot single test learning (6) – timer single test learning (7) – mock

Code repository: github.com/liyixun/rea…