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

يتم اختيار الكود أدناه من basic.test.ts

it('uses the store with a selector and equality checker', async () => {
  const useBoundStore = createWithEqualityFn(
    () => ({ item: { value: 0 } }),
    Object.is,
  )
  const { setState } = useBoundStore
  let renderCount = 0

  function Component() {
    // Prevent re-render if new value === 1.
    const item = useBoundStore(
      (s) => s.item,
      (_, newItem) => newItem.value === 1,
    )
    return (
      

        renderCount: {  renderCount}, value: {item.value}
      
    )
  }

  const { findByText } = render(
    
      
    >,
  )

  await findByText('renderCount: 1, value: 0')

  // This will not cause a re-render.
  act(() => setState({ item: { value: 1 } }))
  await findByText('renderCount: 1, value: 0')

  // This will cause a re-render.
  act(() => setState({ item: { value: 2 } }))
  await findByText('renderCount: 2, value: 2')
})

Zustand يستخدم Vitest لاحتياجات الاختبار الخاصة به. دعنا نستعرض مقتطف الشفرة أعلاه.

تهيئة الإنشاء مع المساواة

const useBoundStore = createWithEqualityFn(
    () => ({ item: { value: 0 } }),
    Object.is,
  )

تمت تهيئة createWithEqualityFn بالحالة () => ({ item: { value: 0 } }) ودالة المساواة هي Object.is

يقبل createWithEqualityFn متغيرين، createState وdefaultEqualityFn.

منع إعادة العرض

// Prevent re-render if new value === 1.
    const item = useBoundStore(
      (s) => s.item,
      (_, newItem) => newItem.value === 1,
    )

يقبل useBoundStore المحدد ووظيفة المساواة المستخدمة لمنع إعادة العرض بناءً على القيمة المطابقة.

يتم استخدام المثال أعلاه في الاختبار الأساسي لمنع إعادة العرض عندما تكون القيمة 1.

await findByText('renderCount: 1, value: 0')

// This will not cause a re-render.
act(() => setState({ item: { value: 1 } }))
await findByText('renderCount: 1, value: 0')

// This will cause a re-render.
act(() => setState({ item: { value: 2 } }))
await findByText('renderCount: 2, value: 2')

تؤكد هذه التأكيدات أن تحديث الحالة لا يسبب أي إعادة عرض.

معلومات عنا:

في Think Throo، نحن في مهمة لتعليم أفضل الممارسات المستوحاة من المشاريع مفتوحة المصدر.

ضاعف مهاراتك في البرمجة من خلال ممارسة المفاهيم المعمارية المتقدمة في Next.js/React، وتعلم أفضل الممارسات وبناء مشاريع على مستوى الإنتاج.

نحن مفتوح المصدر - https://github.com/thinkthroo/thinkthroo (لا تعطينا نجمة!)

قم بتعزيز مهارات فريقك من خلال دوراتنا المتقدمة المبنية على بنية قاعدة التعليمات البرمجية. تواصل معنا على [email protected] لمعرفة المزيد!

مراجع:

1. https://github.com/pmndrs/zustand/blob/main/tests/basic.test.tsx#L92

2. https://vitest.dev/guide/