اختبار مكونات React

اختبر مكون React الأول باستخدام Jest وreact-testing-library

أسهل طريقة لبدء اختبار مكونات React هي إجراء اختبار اللقطة ، وهي تقنية اختبار تتيح لك اختبار المكونات بمعزل عن غيرها.

إذا كنت معتادًا على اختبار البرامج ، فهذا يشبه اختبار الوحدة الذي تقوم به للفئات: تختبر وظيفة كل مكون.

أفترض أنك أنشأت تطبيق React باستخدامcreate-react-app، والتي تأتي بالفعل معدعابةمثبتة ، حزمة الاختبار التي سنحتاجها.

لنبدأ باختبار بسيط. CodeSandbox هي بيئة رائعة لتجربة ذلك. ابدأ بـ React sandbox وأنشئ ملفApp.jsمكون فيcomponentsالمجلد ، وأضف ملفApp.test.jsملف.

import React from 'react'

export default function App() { return ( <div className=“App”> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> </div> ) }

اختبارنا الأول غبي:

test('First test', () => {
  expect(true).toBeTruthy()
})

عندما يكتشف CodeSandbox ملفات الاختبار ، فإنه يقوم تلقائيًا بتشغيلها نيابة عنك ، ويمكنك النقر فوق الزر الاختبارات في أسفل طريقة العرض لإظهار نتائج الاختبار الخاصة بك:

يمكن أن يحتوي ملف الاختبار على عدة اختبارات:

لنفعل شيئًا أكثر فائدة الآن ، لاختبار مكون React بالفعل. لدينا الآن التطبيق فقط ، والذي لا يقوم بأي شيء مفيد حقًا ، لذلك دعونا أولاً نجهز البيئة باستخدام تطبيق صغير مع المزيد من الوظائف: تطبيق العداد الذي أنشأناه سابقًا. إذا تخطيته ، يمكنك العودة وقراءة كيفية بنائه ، ولكن لتسهيل الرجوع إليه ، أضفته هنا مرة أخرى.

إنه مكونان فقط: التطبيق والزر. قم بإنشاء ملفApp.jsملف:

import React, { useState } from 'react'
import Button from './Button'

const App = () => { const [count, setCount] = useState(0)

const incrementCount = increment => { setCount(count + increment) }

return ( <div> <Button increment={1} onClickFunction={incrementCount} /> <Button increment={10} onClickFunction={incrementCount} /> <Button increment={100} onClickFunction={incrementCount} /> <Button increment={1000} onClickFunction={incrementCount} /> <span>{count}</span> </div> ) }

export default App

و الButton.jsملف:

import React from 'react'

const Button = ({ increment, onClickFunction }) => { const handleClick = () => { onClickFunction(increment) } return <button onClick={handleClick}>+{increment}</button> }

export default Button

سنقوم باستخدامreact-testing-library، وهي مساعدة كبيرة لأنها تتيح لنا فحص مخرجات كل مكون وتطبيق الأحداث عليها. يمكنك قراءة المزيد عنهاhttps://github.com/kentcdodds/react-testing-libraryأو بالمشاهدةهذا الفيديو.

دعنا نختبر مكون الزر أولاً.

نبدأ بالاستيرادrenderوfireEventمنreact-testing-library، مساعدين. الأول يتيح لنا عرض JSX. والثاني يتيح لنا إصدار أحداث على أحد المكونات.

إنشاءButton.test.jsووضعه في نفس المجلد مثلButton.js.

import React from 'react'
import { render, fireEvent } from 'react-testing-library'
import Button from './Button'

تُستخدم الأزرار في التطبيق لقبول حدث النقر ثم تستدعي وظيفة تم تمريرها إلى ملفonClickFunctionدعم. نضيف أcountمتغير وننشئ دالة تزيده:

let count

const incrementCount = increment => { count += increment }

الآن خارج للاختبارات الفعلية. نهيئ العد إلى 0 أولاً ، ونعرض أ+1 Buttonمرور المكون أ1إلىincrementو لناincrementCountوظيفة لonClickFunction.

ثم نحصل على محتوى الطفل الأول للمكون ، ونتحقق من مخرجاته+1.

ننتقل بعد ذلك إلى النقر فوق الزر ، ونتحقق من أن العدد قد حصل من 0 إلى 1:

test('+1 Button works', () => {
  count = 0
  const { container } = render(
    <Button increment={1} onClickFunction={incrementCount} />
  )
  const button = container.firstChild
  expect(button.textContent).toBe('+1')
  expect(count).toBe(0)
  fireEvent.click(button)
  expect(count).toBe(1)
})

وبالمثل ، نقوم باختبار زر +100 ، هذه المرة يتم التحقق من الإخراج+100 and the button click increments the count of 100.

test('+100 Button works', () => {
  count = 0
  const { container } = render(
    <Button increment={100} onClickFunction={incrementCount} />
  )
  const button = container.firstChild
  expect(button.textContent).toBe('+100')
  expect(count).toBe(0)
  fireEvent.click(button)
  expect(count).toBe(100)
})

دعنا نختبر مكون التطبيق الآن. يظهر 4 أزرار والنتيجة في الصفحة. يمكننا فحص كل زر ومعرفة ما إذا كانت النتيجة تزداد عند النقر فوقها ، والنقر عدة مرات أيضًا:

import React from 'react'
import { render, fireEvent } from 'react-testing-library'
import App from './App'

test(‘App works’, () => { const { container } = render(<App />) console.log(container) const buttons = container.querySelectorAll(‘button’)

expect(buttons[0].textContent).toBe(’+1’) expect(buttons[1].textContent).toBe(’+10’) expect(buttons[2].textContent).toBe(’+100’) expect(buttons[3].textContent).toBe(’+1000’)

const result = container.querySelector(‘span’) expect(result.textContent).toBe(‘0’) fireEvent.click(buttons[0]) expect(result.textContent).toBe(‘1’) fireEvent.click(buttons[1]) expect(result.textContent).toBe(‘11’) fireEvent.click(buttons[2]) expect(result.textContent).toBe(‘111’) fireEvent.click(buttons[3]) expect(result.textContent).toBe(‘1111’) fireEvent.click(buttons[2]) expect(result.textContent).toBe(‘1211’) fireEvent.click(buttons[1]) expect(result.textContent).toBe(‘1221’) fireEvent.click(buttons[0]) expect(result.textContent).toBe(‘1222’) })

تحقق من الكود الذي يعمل على CodeSandbox هذا:https://codesandbox.io/s/pprl4y0wq

تحميل مجانيكتيب رد الفعل


المزيد من البرامج التعليمية للتفاعل: