Menguji Konteks ReactJS - Panduan dengan ujian-double

Dalam siaran ini, saya akan menjalankan proses pemikiran saya untuk menguji komponen React yang bergantung pada konteks, menggunakan Pustaka Pengujian. Matlamat saya adalah untuk meneroka pendekatan berbeza untuk menguji komponen ini, mengkaji kebaikan dan keburukan menggunakan olok-olok berbanding ujian tanpa mengejek konteks. Kami akan melihat cara setiap pendekatan memberi kesan kepada kebolehpercayaan ujian dan saya akan berkongsi cerapan tentang bila dan sebab satu kaedah mungkin lebih bermanfaat daripada yang lain dalam aplikasi dunia nyata.

Apa yang anda patut tahu

• Untuk apa reactjs digunakan (mungkin anda telah menulis beberapa apl)
• Apa itu vitest

Apakah konteks tindak balas

Konteks ReactJS muncul sebagai penyelesaian kepada masalah biasa dalam struktur komponen ReactJS: penggerudian prop. Penggerudian prop berlaku apabila kita mempunyai rangkaian komponen yang perlu mengakses set data yang sama. Mekanisme konteks membenarkan komponen berkongsi set data yang sama selagi konteks itu sendiri adalah keturunan pertama.

Dalam dokumentasi reactjs, konteks untuk memegang tema digunakan, kerana komponen lain mungkin memerlukan maklumat ini, dokumen menggunakan konteks untuk mengendalikannya dan bukannya menghantar nilai melalui prop. Contoh lain ialah penggunaan konteks untuk menahan reka letak aplikasi, dalam contoh json-tool App.tsx membungkus aplikasi dengan konteks DefaultLayout yang tersedia untuk semua aplikasi.

Aplikasi untuk contoh ini

Untuk contoh yang mengikuti apl tema akan digunakan. Ia adalah aplikasi yang membolehkan pengguna bertukar antara tema terang/gelap. Aplikasi ini juga digunakan dalam dokumentasi rasmi reactjs. Aplikasi ini terdiri daripada togol mudah yang bertukar antara mod tema terang dan mod tema gelap. Aplikasi ini semudah yang didapat dan kami boleh merancang semuanya dalam satu fail:

import { createContext, useContext, useState } from 'react'
const ThemeContext = createContext('light')

function Page() {
  const theme = useContext(ThemeContext)
  return (
    <div>
      <p>current theme: {theme}</p>
    </div>
  )
}

function App() {
  const [theme, setTheme] = useState('light')
  return (
    <ThemeContext.Provider value={theme}>
      <button
        className={theme}
        onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
      >
        Toggle
      </button>
      <Page />
    </ThemeContext.Provider>
  )
}

export default App

Dalam aplikasi ini, kami mempunyai dua komponen utama: Apl dan Halaman. Komponen Apl berfungsi sebagai komponen utama dan mengandungi keadaan untuk tema semasa, yang boleh sama ada "terang" atau "gelap". Ia juga termasuk butang yang menogol tema antara mod terang dan gelap. Komponen Halaman ialah anak kepada Apl dan menggunakan konteks tema untuk memaparkan tema semasa. Butang dalam komponen Apl ialah butang togol mudah yang, apabila diklik, menukar tema dan mengemas kini nilai konteks dengan sewajarnya.

Dalam bahagian seterusnya kita akan bercakap tentang menghiris komponen untuk ujian.

Penyalaan untuk ujian

Biasanya dalam mana-mana aplikasi, kita perlu fokus pada jenis ujian yang ingin kita lakukan, dan bahagian mana yang ingin kita tangani. Sebagai contoh, kami boleh menyasarkan satu komponen, bukannya keseluruhan aplikasi. Dalam contoh kami, kami akan bermula dengan komponen Halaman. Yang memerlukan kami menggunakan test-double untuk mengujinya.

Double ujian datang daripada struktur apl itu sendiri, kerana ia bergantung pada konteks, untuk mengubahnya, nilai dalam konteks perlu juga berubah.

Ujian-berganda

Untuk bermula dengan pendekatan ujian kami dengan konteks dalam reactjs kami akan mula menulis ujian pertama:

import { createContext, useContext, useState } from 'react'
const ThemeContext = createContext('light')

function Page() {
  const theme = useContext(ThemeContext)
  return (
    <div>
      <p>current theme: {theme}</p>
    </div>
  )
}

function App() {
  const [theme, setTheme] = useState('light')
  return (
    <ThemeContext.Provider value={theme}>
      <button
        className={theme}
        onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
      >
        Toggle
      </button>
      <Page />
    </ThemeContext.Provider>
  )
}

export default App

Ujian ini akan lulus seperti yang dijangkakan, memandangkan tema cahaya ditetapkan menjadi tema lalai dalam ThemeContext. Kami juga boleh memandu uji contoh pertama ini, bagaimanapun, perkara menjadi menarik dalam ujian kedua, apabila kami berminat dengan tema gelap. Untuk masuk ke tema gelap, kita perlu mula menggunakan test-doubles, memandangkan kita bergantung pada konteks reactjs untuk melakukannya. Ujian kedua membawa vi.mock ke dalam campuran serta vi.mocked. Ambil perhatian bahawa ujian kedua yang akan ditulis juga memerlukan yang pertama ditukar.

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

describe('<Page />', () => {
  it('should render light as default theme', () => {
    render(<Page />)
    expect(screen.getByText('current theme: light')).toBeInTheDocument()
  })
})

Kedua-dua kes ujian kini menggunakan kes palsu untuk memandu uji aplikasi. Jika kita menukar data pemulangan daripada konteks, ujian juga akan berubah. Perkara yang menjadi perhatian di sini ialah:

• Kami mengejek konteks reactjs yang menyinggung "jangan mengejek apa yang bukan prinsip anda sendiri"
• Ujian menjadi lebih bertele-tele, kerana kita dikehendaki menggunakan ejekan untuk melakukannya
• Dua ujian yang kami tulis tidak menggambarkan interaksi pengguna dengan aplikasi. Kami tahu bahawa tema akan berubah apabila butang togol ditekan.

Kod lengkap yang digunakan dalam bahagian ini tersedia di GitHub

Tanpa ujian-ganda

Pendekatan seterusnya ialah menggunakan konteks yang dibenamkan ke dalam aplikasi kami, tanpa mengasingkannya atau menggunakan sebarang ujian-double. Jika kita mengambil pendekatan ini dengan TDD, kita boleh mulakan dengan ujian yang sangat mudah yang menyerupai cara pengguna akan berkelakuan:

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

vi.mock('react', () => {
  return {
    ...vi.importActual('react'),
    useContext: vi.fn(),
    createContext: vi.fn()
  }
})

describe('<Page />', () => {
  it('should render light as default theme', () => {
    vi.mocked(useContext).mockReturnValue('light')
    render(<Page />)
    expect(screen.getByText('current theme: light')).toBeInTheDocument()
  })

  it('should render dark theme', () => {
    vi.mocked(useContext).mockReturnValue('dark')
    render(<Page />)
    expect(screen.getByText('current theme: dark')).toBeInTheDocument()
  })
})

Kemudian mengikuti ujian kedua, bahawa kami ingin menetapkan tema cahaya secara lalai:

import { render, screen } from '@testing-library/react'
import App from './App'
import userEvent from '@testing-library/user-event'

describe('<App />', () => {
  it('should render toggle button', () => {
    render(<App />)
    expect(screen.getByText('Toggle')).toBeInTheDocument()
  })
})

dan yang terakhir sekali ialah penukaran tema:

import { render, screen } from '@testing-library/react'
import App from './App'
import userEvent from '@testing-library/user-event'

describe('<App />', () => {
  it('should render toggle button', () => {
    render(<App />)
    expect(screen.getByText('Toggle')).toBeInTheDocument()
  })

  it('should render light as default theme', () => {
    render(<App />)
    expect(screen.getByText('current theme: light')).toBeInTheDocument()
  })
})

Titik perhatian kepada strategi ini:

• Ujian berganda tidak diperlukan, ia menjadikan ujian dengan kod kurang
• Tingkah laku ujian sepadan dengan perkara yang akan dilakukan oleh pengguna dalam aplikasi sebenar

Kod lengkap yang digunakan dalam bahagian ini tersedia di GitHub

Kebaikan dan keburukan setiap pendekatan

Dalam bahagian ini, kita akan membincangkan kebaikan dan keburukan setiap pendekatan berkenaan dengan sifat yang berbeza.

Pemfaktoran semula kepada prop

Menggunakan test-double untuk konteks menjadikan ujian rapuh untuk perubahan jenis ini. Memfaktorkan semula penggunaan useContext dengan props secara automatik menjadikan ujian gagal walaupun tingkah laku tidak. Menggunakan pilihan yang tidak menggunakan test-double menyokong pemfaktoran semula dalam pengertian itu.

Mencipta konteks tersuai

Perkara yang sama berlaku untuk menggunakan konteks tersuai dan bukannya bergantung pada penyedia konteks daripada reactjs secara langsung. Menggunakan pilihan tanpa ujian-double membolehkan pemfaktoran semula.

Kesimpulan

Dalam panduan ini, kami meneroka cara menguji komponen yang bergantung pada konteks, tanpa memerlukan penggandaan ujian, menjadikan ujian lebih mudah, lebih dekat dengan interaksi pengguna sebenar dan kontras kebaikan dan keburukan setiap pendekatan. Apabila boleh, menggunakan pendekatan mudah yang mencerminkan interaksi pengguna harus diikuti. Walau bagaimanapun, apabila ujian-double diperlukan, ia harus digunakan menyasarkan kebolehselenggaraan kod ujian. Mempunyai ujian mudah membolehkan pemfaktoran semula dalam kod pengeluaran dengan yakin.

Sumber

• Membuat konteks tersuai
• Katalog pemfaktoran semula
• digunakan untuk mencari cara untuk mengejek bahagian tertentu modul dengan vitest
• digunakan untuk mencari cara untuk membetulkan isu jenis
• menguji userEvent pustaka

Langkah Seterusnya

• Cuba uji senario yang lebih kompleks yang melibatkan berbilang konteks atau penyedia bersarang.
• Walaupun kami mengelakkan ejekan dalam panduan ini, terdapat kes di mana ejekan diperlukan. Terokai teknik mengejek lanjutan untuk senario tersebut.

Dengan mengikuti langkah ini, anda boleh terus meningkatkan kemahiran ujian anda dan memastikan aplikasi React anda terbuka untuk pemfaktoran semula.

Atas ialah kandungan terperinci Menguji Konteks ReactJS - Panduan dengan ujian-double. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!