Question

对React组件进行单元测试

但是，当我打算将测试分解为describe()函数中的较小块时，我可以正确渲染组件。测试失败了，这就是原因。

当前只有一个test()通过，但不是两个都通过

import React from 'react'
import 'react-testing-library/cleanup-after-each'
import { render, fireEvent } from 'react-testing-library'
import Quantity from '../components/Quantity'

describe('Quantity Component', () => {
  const { container, getByTestId } = render(<Quantity />)

// first test
  test('checks that quantity is never 0', () => {
    expect(getByTestId('quantity')).not.toBe('0')
  })

// second test
  test('checks for the initial product quantity count', () => {
    expect(getByTestId('quantity')).toHaveTextContent('1')

    fireEvent.click(getByTestId('increment'))
    expect(getByTestId('quantity')).toHaveTextContent('2')
  })
})

在尝试运行两个测试时都会出错： Unable to find an element by: [data-testid="quantity"]

[data-testid="quantity"]只是我在所需的JSX标记内传递的属性。

仅通过进行第一次或第二次测试，但不能同时两者运行时，测试通过。

我在这里想念什么？

Answer 1

在单元测试中严格避免交叉污染。

问题在于，每个Quantity Component套件只能进行一次设置，而每次测试都应进行一次设置。这是beforeEach的用途：

describe('Quantity Component', () => {
  let container, getByTestId;

  beforeEach(() => {
    ({ container, getByTestId } = render(<Quantity />));
  });
  ...

Answer 2

您还需要使用afterEach清理。

describe('your tests', () => {
  afterEach(cleanup);
  beforeEach(() => ({container, getById} = render(<Quantity />))

  it('does something', () => {
    expect(getByTestId('quantity')).toHaveTextContent(0);
  }
}

Answer 3

我建议您在render子句中调用it，这样可以使测试更易于管理：

describe('Quantity Component', () => {  
  test('checks that quantity is never 0', () => {
    const { container, getByTestId } = render(<Quantity />)
    expect(getByTestId('quantity')).not.toBe('0')
  })

  test('checks for the initial product quantity count', () => {
    const { container, getByTestId } = render(<Quantity />)
    expect(getByTestId('quantity')).toHaveTextContent('1')

    fireEvent.click(getByTestId('increment'))
    expect(getByTestId('quantity')).toHaveTextContent('2')
  })
})

另一个优点是，如果由于某种原因您的一项测试需要使用不同的道具运行，则可以使用此设置更轻松地做到这一点。

反应测试库|无法在描述方法内部

3 个答案: