测试

使用 Vitest 和 Jest 测试 React 组件的最佳实践。

使用 Vitest 或 Jest 编写测试时，请遵循以下实践以获得最佳结果。

注意

通常，我们建议使用Vitest 而不是 Jest，但设置过程相似。

设置

在编写测试之前，请确保您的项目已安装必要的依赖项

npm install --save-dev vitest jsdom @testing-library/dom @testing-library/jest-dom @testing-library/react @testing-library/user-event

配置

创建 vite.config.ts 文件来配置 Vitest。

import { defineConfig } from "vitest/config"

export default defineConfig({
  // ...
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: "./setup-test.ts",
  },
})

将 globals: true 设置为自动导入 Vitest 全局变量，无需再导入 expect、test、describe 等。

设置测试文件

创建 setup-test.ts 文件来配置测试环境并模拟未实现的 API。

以下是 Chakra v3 项目的一个常见示例

import "@testing-library/jest-dom/vitest"
import { JSDOM } from "jsdom"
import ResizeObserver from "resize-observer-polyfill"
import { vi } from "vitest"
import "vitest-axe/extend-expect"

const { window } = new JSDOM()

// ResizeObserver mock
vi.stubGlobal("ResizeObserver", ResizeObserver)
window["ResizeObserver"] = ResizeObserver

// IntersectionObserver mock
const IntersectionObserverMock = vi.fn(() => ({
  disconnect: vi.fn(),
  observe: vi.fn(),
  takeRecords: vi.fn(),
  unobserve: vi.fn(),
}))
vi.stubGlobal("IntersectionObserver", IntersectionObserverMock)
window["IntersectionObserver"] = IntersectionObserverMock

// Scroll Methods mock
window.Element.prototype.scrollTo = () => {}
window.Element.prototype.scrollIntoView = () => {}

// requestAnimationFrame mock
window.requestAnimationFrame = (cb) => setTimeout(cb, 1000 / 60)

// URL object mock
window.URL.createObjectURL = () => "https://i.pravatar.cc/300"
window.URL.revokeObjectURL = () => {}

// navigator mock
Object.defineProperty(window, "navigator", {
  value: {
    clipboard: {
      writeText: vi.fn(),
    },
  },
})

// Override globalThis
Object.assign(global, { window, document: window.document })

自定义渲染

首先，您需要创建一个自定义渲染函数，将您的组件包装在 ChakraProvider 中。

test-utils/render.tsx

// ./testing/render.tsx
import { Provider } from "@/components/ui/provider"
import { render as rtlRender } from "@testing-library/react"

export function render(ui: React.ReactNode) {
  return rtlRender(<>{ui}</>, {
    wrapper: (props: React.PropsWithChildren) => (
      <Provider>{props.children}</Provider>
    ),
  })
}

测试组件

现在，您可以使用 render 函数来测试您的组件。

testing/render.tsx

import { Button } from "@chakra-ui/react"
import { render } from "./testing/render"

test("renders a button", () => {
  render(<Button>Click me</Button>)
  expect(screen.getByText("Click me")).toBeInTheDocument()
})

服务器组件

纵横比