react hooks使用_使用React Hooks测试库测试自定义挂钩

react hooks使用

Hooks are popular, as they bring readability and maintainability. Custom hooks become enablers for composability and reusability. In headless UI components, we explored custom hooks, along with high-order components (HOCs).

钩子很流行，因为它们带来了可读性和可维护性。 自定义挂钩成为可组合性和可重用性的促成因素。 在无头UI组件中 ，我们探索了自定义钩子以及高阶组件(HOC)。

How can we test them? In Test Cases and Test Coverage for High Order Components, we gave examples on how to write test cases for high order components and how to measure test coverage, using the Jest and React Testing Library. In this article, we are going to demonstrate how to use React Hooks Testing Library to test custom hooks.

我们如何测试它们？ 在高阶组件的测试用例和测试覆盖率中 ，我们给出了有关如何使用Jest和React Testing库编写高阶组件的测试用例以及如何衡量测试覆盖率的示例。 在本文中，我们将演示如何使用React Hooks Testing Library测试自定义钩子。

安装React Hooks测试库 (Install React Hooks Testing Library)

There are two packages needed for testing custom hooks:

测试自定义钩子需要两个软件包：

npm install --save-dev @testing-library/react-hooks
npm install --save-dev react-test-renderer

After the installation, these packages become devDependencies in package.json.

安装后，这些软件包在package.json成为devDependencies 。

Test Renderer (react-test-renderer) is used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment. The installed version should match the React version.

Test Renderer ( react-test-renderer )用于将React组件呈现为纯JavaScript对象，而不依赖于DOM或本机移动环境。 安装的版本应与React版本匹配。

@testing-library/react-hooks is built on top of Test Renderer.

@testing-library/react-hooks是建立在Test Renderer之上的。

You probably need other @testing-library packages too. If you use Create React App, they are part of dependencies in package.json:

您可能还需要其他@testing-library软件包。 如果您使用Create React App ，则它们是package.json中dependencies一部分：

"dependencies": {
       
  "@testing-library/jest-dom": "^4.2.4",
  "@testing-library/react": "^9.5.0",
  "@testing-library/user-event": "^7.2.1"
}

renderHook API (renderHook API)

renderHook API is the center piece of @testing-library/react-hooks. It renders a test component that calls the provided callback, including any hooks it calls, every time it renders.

renderHook</