React 测试库：如何管理重复的测试代码

Question

最近我正在对一个由不同组件和服务组成的应用程序进行集成测试，因此我正在为与这些元素的不同用户行为交互创建测试。

我注意到我的测试重复了一些常见的初始语句。

例如：

我需要触发初始搜索输入才能显示列表数据。

所以我总是从下一句话开始：

beforeEach(() => render(MyComponent))

test('test A', () => {
  fireEvent.click(screen.getByRole('button', {name: /search/i/)))
  // ... rest of the particular test
})

test('test B', () => {
  fireEvent.click(screen.getByRole('button', {name: /search/i/)))
  // ... rest of the particular test
})

test('test C', () => {
  fireEvent.click(screen.getByRole('button', {name: /search/i/)))
  // ... rest of the particular test
})

// and so on...

所以我所做的是创建一个 fireSearchClick 全局函数作为：

const fireSearchClick = () => fireEvent.click(screen.getByRole('button', {name: /search/i/)))

test('test A', () => {
  fireSearchClick() // <<< now is called in this way
  // ... rest of the particular test
})

我认为这样做的好处是只有一个地方可以更新“fire search”触发器，例如，如果按钮标签更改为“提交”（就像更改示例一样）。

但是当我继续进行更多测试时，我以可重复的模式结束，例如：

test('test N', async () => {
  fireSearchClick()

  await loadingData() // another global function that i created for wait results

  fireNextPage() // another global function that i created for go through next page results
  
  await loadingData()

  // the particular things of this test...
})

test('test M', async () => {
  fireSearchClick()

  await loadingData() // another global function that i created for wait results

  fireNextPage() // another global function that i created for go through next page results
  
  await loadingData()

  // the particular things of this test...
})

// and so on...

我关心的是：

这是个好主意吗？
是否有另一种更好的方法来执行可重复的测试步骤？

我正在考虑在 beforeEach 挂钩上实现所有初始可重复步骤，但它可能它可能包含很多难以跟踪的逻辑当某些步骤失败时（例如，如果我在 beforeEach 中执行 fireEvent 失败，很难找出错误在哪里）

你怎么看？你如何处理这种情况？

Answer 1

您可以将所有设置组合在一个函数中并在您的测试或 beforeEach 挂钩中调用它

const setupTest = async () => {
  render(<MyComponent />)
  fireSearchClick()
  await loadingData()
  fireNextPage()
  await loadingData()
}

test('test M', async () => {
  await setupTest()
  // the particular things of this test...
})

但是，如果这使得测试速度太慢而您想提高速度，您可以尝试渲染状态已经设置的特定组件——准备好测试。即

render(<MyComponent data={mockData} page={2} />)

React 测试库：如何管理重复的测试代码

React testing library: How to manage the duplicated test code

integration-testing

unit-testing

react-testing-library