使用 Vitest 和 React Testing Library 给 Next.js 应用单元测试

yarn add vitest -D

{
  ...
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "test": "vitest",
    "lint": "next lint"
  },
  ...
}

import { describe, it, expect } from 'vitest'

describe('something truthy and falsy', () => {
  it('true to be true', () => {
    expect(true).toBe(true)
  })

  it('false to be false', () => {
    expect(false).toBe(false)
  })
})

yarn add @testing-library/react @vitejs/plugin-react jsdom -D

const jsdom = require('jsdom')
const { JSDOM } = jsdom
const dom = new JSDOM(`
Hello world`)
console.log(dom.window.document.querySelector('p').textContent) //

import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
  },
})

import { describe, expect, it } from 'vitest'
import { render, screen } from '@testing-library/react'

function App() {
  return <div>appdiv>
}

describe('App', () => {
  it('it should be render', () => {
    render(<App />)
    expect(screen.getByText('app')).toBeInTheDocument()
  })
})

import { vi, expect, afterEach } from 'vitest'
import { cleanup } from '@testing-library/react'
import matchers, { TestingLibraryMatchers } from '@testing-library/jest-dom/matchers'

declare global {
  namespace Vi {
    interface JestAssertion<T = any>
      extends jest.Matchers<void, T>,
        TestingLibraryMatchers<T, void> {}
  }
}
// 继承 testing-library 的扩展 except
expect.extend(matchers)
// 全局设置清理函数，避免每个测试文件手动清理
afterEach(() => {
  cleanup()
})

export default defineConfig({
  plugins: [react()],
  test: {
    environment: "jsdom",
 +   setupFiles: "./vitest-setup.ts",
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "."),
    },
  },
});

import { describe, expect, it } from 'vitest'
import { render, screen } from '@testing-library/react'
import VideoList from '@/components/video-list'

describe('VideoList', () => {
  it('it should be render', () => {
    const { container } = render(<VideoList data={[]} />)
    expect(container).toMatchSnapshot()
  })

  it('it should be render with data', () => {})

  it.skip('it should be render with className', () => {})

  it.skip('it should be editable with editable props', () => {})

  it.skip('it should not be editable without editable props', () => {})
})

type Props = {
  className?: string
  editable?: boolean
  horizontal?: boolean
  data: (Video & {
    author: User
  })[]
}

export default function VideoList({ data, editable, className, horizontal }: Props) {
  return (
    <div className={className}>
      {data.map((item) => {
        return <VideoItem key={item.id} editable={editable} horizontal={horizontal} item={item} />
      })}
    div>
  )
}

type ItemProps = {
  editable?: boolean
  horizontal?: boolean
  item: Video & {
    author: User
  }
}

function VideoItem({ item, horizontal, editable }: ItemProps) {
  return (
    <div className="flex flex-col justify-center bg-white p-2 ring-1 ring-gray-200" key={item.id}>
      <div
        className={`flex gap-3 ${
          horizontal ? 'test-horizontal flex-row' : 'test-vertical flex-col'
        }`}
      >
        <Link href={`/video/${item.id}`}>
          <a className="flex gap-2">
            <Image src={item.pic} width={160} height={90} alt={item.title} />
          a>
        Link>
        <Link href={`/video/${item.id}`}>
          <a>
            <div className="mt-2">{item.title}div>
            <div className="mt-2">{item.author.name}div>
          a>
        Link>
      div>

      {editable && (
        <div className="flex justify-end space-x-3">
          <button
            role="edit"
            className="rounded border border-blue-600 bg-blue-600 px-3 py-2 text-white"
          >
            编辑
          button>
          <button
            role="delete"
            className="rounded border border-gray-200 bg-gray-50 px-3 py-2 text-gray-600"
          >
            删除
          button>
        div>
      )}
    div>
  )
}

it('it should be editable with editable props', () => {
  const { container } = render(<VideoList data={mockData} editable />)

  expect(screen.queryAllByRole('edit')).toHaveLength(mockData.length)
  expect(screen.queryAllByRole('delete')).toHaveLength(mockData.length)
})

yarn text --coverage

import { useState, useEffect, MutableRefObject } from 'react'

export default function useOnScreen<T extends Element>(
  ref: MutableRefObject<T>,
  rootMargin: string = '0px'
): boolean {
  // 元素是否可见
  const [isIntersecting, setIntersecting] = useState<boolean>(false)
  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        //更新返回数据
        setIntersecting(entry.isIntersecting)
      },
      {
        rootMargin,
      }
    )
    if (ref.current) {
      observer.observe(ref.current)
    }
    return () => {
      observer.unobserve(ref.current)
    }
  }, []) //只在挂载的时候监听一次
  return isIntersecting
}

import { vi } from 'vitest'

const IntersectionObserverMock = vi.fn(() => ({
  disconnect: vi.fn(),
  observe: vi.fn(),
  takeRecords: vi.fn(),
  unobserve: vi.fn(),
}))

vi.stubGlobal('IntersectionObserver', IntersectionObserverMock)

function App() {
  const ref = useRef()
  const visible = useOnScreen(ref)
  return (
    <div role="test" ref={ref}>
      {visible ? 'true' : 'false'}
    div>
  )
}

describe('useOnScreen', () => {
  it('default value is false，After tigger function should be true', async () => {
    render(<App />)
    expect(screen.getByRole('test')).toHaveTextContent('false')
  })
})

import { describe, expect, it, vi } from 'vitest'
import { render, screen, renderHook, act } from '@testing-library/react'
import useOnScreen from '@/hooks/useOnScreen'
import { useRef } from 'react'
// 模拟 IntersectionObserver
const IntersectionObserverMock = vi.fn((a) => ({
  disconnect: vi.fn(),
  observe: vi.fn(),
  takeRecords: vi.fn(),
  unobserve: vi.fn(),
}))

vi.stubGlobal('IntersectionObserver', IntersectionObserverMock)

function App() {
  const ref = useRef()
  const visible = useOnScreen(ref)
  return (
    <div role="test" ref={ref}>
      {visible ? 'true' : 'false'}
    div>
  )
}

describe('useOnScreen', () => {
  it('default value is false，After callback value should be true', async () => {
    render(<App />)
    //  获得 mock 函数调用的参数
    const callback = IntersectionObserverMock.mock.calls[0][0]

    expect(screen.getByRole('test')).toHaveTextContent('false')

    act(() => {
      callback([{ isIntersecting: true }])
    })
    expect(screen.getByRole('test')).toHaveTextContent('true')
  })
})