测试React应用

import { afterEach } from 'vitest'

import { cleanup } from '@testing-library/react'

import '@testing-library/jest-dom/vitest'

afterEach(() => {

  cleanup()

})

export default defineConfig({

  // ...

  test: {

    environment: 'jsdom',

    globals: true,

    setupFiles: './testSetup.js', 

  }

})

import { render, screen } from '@testing-library/react'

import Blog from './Blog'

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

import userEvent from '@testing-library/user-event'

describe('<Blog />', () => {

    let container;

        const blog = {

        title: 'Test blog',

        author: 'Test author',

        url: 'www.test.com',

        likes: 0,

    }

    beforeEach(() => {

        container = render( // 渲染组件

            <Blog blog={blog}>

            </Blog>

        ).container

    })

    test('when the button is clicked, then the event handler is called once', async () => {

        const user = userEvent.setup() // 创建一个模拟用户

        const button = screen.getByText('view') // 获取按钮

        await user.click(button) // 点击按钮

        const div = container.querySelector('.blogDetails') // 获取 div

        expect(div).not.toHaveStyle('display: none') // 判断 div 是否隐藏

    })

    test('when the button is clicked, then the event handler is called once', async () => {

        const user = userEvent.setup()

        const button = screen.getByText('view')

        await user.click(button)

        expect(screen.findByText('url: ')).toBeDefined() 

        expect(screen.findByText('likes: ')).toBeDefined()

    })

})

// vitest.config.js

import { defineConfig } from 'vitest/config'

export default defineConfig({

  test: {

    coverage: {

      provider: 'v8' // 或 'istanbul'

    }

  }

})