Baru-baru ini saya bekerja dengan pengujian integrasi dari aplikasi yang disusun oleh berbagai komponen dan layanan, jadi saya membuat pengujian untuk interaksi perilaku pengguna yang berbeda dengan elemen ini.

Hal yang saya perhatikan adalah bahwa pengujian saya mengulangi beberapa pernyataan awal yang umum.

Sebagai contoh:

  • Ada input pencarian awal yang perlu saya picu agar data daftar ditampilkan.

Jadi saya selalu mulai dengan kalimat berikutnya:

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...

Jadi yang saya lakukan adalah membuat fungsi global fireSearchClick sebagai:

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
})

Saya pikir ini memiliki keuntungan bahwa hanya ada satu tempat untuk memperbarui pemicu "pencarian api", misalnya, jika label tombol berubah menjadi "kirim" (seperti contoh perubahan).

Tetapi ketika saya melanjutkan lebih banyak tes, saya mengakhiri dengan pola yang dapat diulang seperti:

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...

Kekhawatiran saya di sini adalah:

  • Apakah ini ide yang bagus?
  • Apakah ada cara lain yang lebih baik untuk menjalankan langkah-langkah yang dapat diulang pada pengujian?

Saya berpikir untuk menerapkan semua langkah awal yang dapat diulang pada kait beforeEach, tetapi mungkin itu bisa berisi banyak logika yang akan sulit dilacak ketika beberapa langkah itu gagal (untuk contoh, sulit untuk mengetahui di mana kesalahannya jika saya gagal fireEvent eksekusi di dalam beforeEach)

Bagaimana menurut anda? bagaimana Anda mengelola skenario ini?

0
J.Correa 20 November 2020, 18:04

1 menjawab

Jawaban Terbaik

Anda dapat mengelompokkan semua penyiapan dalam satu fungsi dan menyebutnya di dalam pengujian Anda atau kait beforeEach

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

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

Namun, jika ini membuat pengujian terlalu lambat dan Anda ingin meningkatkan kecepatan, Anda dapat mencoba merender komponen tertentu dengan status yang sudah disiapkan--siap untuk pengujian Anda. yaitu

render(<MyComponent data={mockData} page={2} />)
0
Doug 21 November 2020, 00:30