Loading...
Loading...
Compare original and translation side by side
// ❌ BAD: Overmocked
test('calculate total', () => {
const mockAdd = vi.fn(() => 10)
const mockMultiply = vi.fn(() => 20)
// Testing implementation, not behavior
})
// ✅ GOOD: Mock only external dependencies
test('calculate order total', () => {
const mockPricingAPI = vi.fn(() => ({ tax: 0.1 }))
const total = calculateTotal(order, mockPricingAPI)
expect(total).toBe(38)
})// ❌ 不良示例:过度Mock
test('calculate total', () => {
const mockAdd = vi.fn(() => 10)
const mockMultiply = vi.fn(() => 20)
// 测试实现细节,而非行为
})
// ✅ 良好示例:仅Mock外部依赖
test('calculate order total', () => {
const mockPricingAPI = vi.fn(() => ({ tax: 0.1 }))
const total = calculateTotal(order, mockPricingAPI)
expect(total).toBe(38)
})// ❌ BAD: Tests implementation details
await page.locator('.form-container > div:nth-child(2) > button').click()
// ✅ GOOD: Semantic selector
await page.getByRole('button', { name: 'Submit' }).click()// ❌ 不良示例:测试实现细节
await page.locator('.form-container > div:nth-child(2) > button').click()
// ✅ 良好示例:语义化选择器
await page.getByRole('button', { name: 'Submit' }).click()// ❌ BAD: Race condition
test('loads data', async () => {
fetchData()
await new Promise(resolve => setTimeout(resolve, 1000))
expect(data).toBeDefined()
})
// ✅ GOOD: Proper async handling
test('loads data', async () => {
const data = await fetchData()
expect(data).toBeDefined()
})// ❌ 不良示例:竞态条件
test('loads data', async () => {
fetchData()
await new Promise(resolve => setTimeout(resolve, 1000))
expect(data).toBeDefined()
})
// ✅ 良好示例:正确处理异步
test('loads data', async () => {
const data = await fetchData()
expect(data).toBeDefined()
})// ❌ BAD: Weak assertion
test('returns users', async () => {
const users = await getUsers()
expect(users).toBeDefined() // Too vague!
})
// ✅ GOOD: Strong, specific assertions
test('creates user with correct attributes', async () => {
const user = await createUser({ name: 'John' })
expect(user).toMatchObject({
id: expect.any(Number),
name: 'John',
})
})// ❌ 不良示例:模糊断言
test('returns users', async () => {
const users = await getUsers()
expect(users).toBeDefined() // 过于模糊!
})
// ✅ 良好示例:具体明确的断言
test('creates user with correct attributes', async () => {
const user = await createUser({ name: 'John' })
expect(user).toMatchObject({
id: expect.any(Number),
name: 'John',
})
})undefinedundefinedundefinedundefinedtest('user registration', async () => {
// Arrange
const userData = { email: 'user@example.com' }
// Act
const user = await registerUser(userData)
// Assert
expect(user.email).toBe('user@example.com')
})test('user registration', async () => {
// 准备
const userData = { email: 'user@example.com' }
// 执行
const user = await registerUser(userData)
// 断言
expect(user.email).toBe('user@example.com')
})// ❌ BAD
const spy = vi.spyOn(Math, 'sqrt')
calculateDistance()
expect(spy).toHaveBeenCalled() // Testing how, not what
// ✅ GOOD
const distance = calculateDistance({ x: 0, y: 0 }, { x: 3, y: 4 })
expect(distance).toBe(5) // Testing output// ❌ 不良示例
const spy = vi.spyOn(Math, 'sqrt')
calculateDistance()
expect(spy).toHaveBeenCalled() // 测试过程,而非结果
// ✅ 良好示例
const distance = calculateDistance({ x: 0, y: 0 }, { x: 3, y: 4 })
expect(distance).toBe(5) // 测试输出结果// ❌ BAD
const mockAdd = vi.fn((a, b) => a + b)
// ✅ GOOD: Use real implementations
import { add } from './utils'
// Only mock external services
const mockPaymentGateway = vi.fn()// ❌ 不良示例
const mockAdd = vi.fn((a, b) => a + b)
// ✅ 良好示例:使用真实实现
import { add } from './utils'
// 仅Mock外部服务
const mockPaymentGateway = vi.fn()vitest-testingplaywright-testingmutation-testingvitest-testingplaywright-testingmutation-testing