enzyme

إنزيم

الإنزيم هو أداة اختبار JavaScript لـ React التي تجعل من السهل اختبار إخراج مكونات React. يمكنك أيضًا معالجة وتجارة وتجارة ، وفي بعض النواحي محاكاة وقت التشغيل بالنظر إلى الإخراج.

من المفترض أن تكون واجهة برمجة تطبيقات الإنزيم بديهية ومرنة من خلال محاكاة واجهة برمجة تطبيقات jQuery للتلاعب DOM وتجاوزها.

الترقية من الإنزيم 2.x أو رد فعل <16

هل أنت هنا للتحقق مما إذا كان الإنزيم متوافقًا أم لا مع React 16؟ هل تستخدم حاليًا إنزيم 2.x؟ عظيم! تحقق من دليل الترحيل الخاص بنا للمساعدة في الانتقال إلى إنزيم V3 حيث يتم دعم React 16.

تثبيت

للبدء مع الإنزيم ، يمكنك ببساطة تثبيته عبر NPM. ستحتاج إلى تثبيت الإنزيم مع محول يتوافق مع إصدار React (أو مكتبة مكونات واجهة المستخدم الأخرى) التي تستخدمها. على سبيل المثال ، إذا كنت تستخدم الإنزيم مع React 16 ، فيمكنك تشغيل:

npm i --save-dev enzyme enzyme-adapter-react-16

قد يكون لكل محول تبعيات من الأقران إضافية ستحتاج إلى تثبيتها أيضًا. على سبيل المثال ، لدى enzyme-adapter-react-16 تبعيات الأقران على react و react-dom .

في الوقت الحالي ، يحتوي الإنزيم على محولات توفر التوافق مع React 16.x ، React 15.x ، React 0.14.x و React 0.13.x

يتم توفير المحولات التالية رسميًا بواسطة الإنزيم ، ولديها التوافق التالي مع React:

حزمة محول الإنزيم	رد فعل التوافق Semver
enzyme-adapter-react-16	^16.4.0-0
enzyme-adapter-react-16.3	~16.3.0-0
enzyme-adapter-react-16.2	~16.2
enzyme-adapter-react-16.1	~16.0.0-0 || ~16.1
enzyme-adapter-react-15	^15.5.0
enzyme-adapter-react-15.4	15.0.0-0 - 15.4.x
enzyme-adapter-react-14	^0.14.0
enzyme-adapter-react-13	^0.13.0

أخيرًا ، تحتاج إلى تكوين الإنزيم لاستخدام المحول الذي تريد استخدامه. للقيام بذلك ، يمكنك استخدام API configure(...) .

 import Enzyme from 'enzyme' ;
import Adapter from 'enzyme-adapter-react-16' ;

Enzyme . configure ( { adapter : new Adapter ( ) } ) ;

محولات الطرف الثالث

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

حزمة المحول	للمكتبة	حالة
enzyme-adapter-preact-pure	preact	(مستقر)
enzyme-adapter-inferno	inferno	(العمل قيد التقدم)

تشغيل اختبارات الإنزيم

إن الإنزيم غير معتمد فيما يتعلق بالمكتبة المتخصصة أو مكتبة التأكيد التي تستخدمها ، ويجب أن تكون متوافقة مع جميع المتسابقين في الاختبارات ومكتبات التأكيد هناك. تستخدم الوثائق والأمثلة الخاصة بالإنزيم Mocha و Chai ، ولكن يجب أن تكون قادرًا على استقراء إطارك المفضل.

إذا كنت مهتمًا باستخدام الإنزيم مع تأكيدات مخصصة ووظائف الراحة لاختبار مكونات React الخاصة بك ، فيمكنك التفكير في استخدام:

• chai-enzyme مع موكا/تشاي.
• jasmine-enzyme مع الياسمين.
• jest-enzyme مع مزاح.
• should-enzyme . js.
• expect-enzyme للتوقع.

باستخدام الإنزيم مع موكا

باستخدام الإنزيم مع الكرمة

باستخدام الإنزيم مع المتصفح

باستخدام الإنزيم مع systemjs

باستخدام الإنزيم مع webpack

باستخدام الإنزيم مع jsdom

باستخدام الإنزيم مع React Native

باستخدام الإنزيم مع Jest

باستخدام الإنزيم مع المختبر

باستخدام الإنزيم مع الشريط و AVA

الاستخدام الأساسي

التقديم الضحل

 import React from 'react' ;
import { expect } from 'chai' ;
import { shallow } from 'enzyme' ;
import sinon from 'sinon' ;

import MyComponent from './MyComponent' ;
import Foo from './Foo' ;

describe ( '<MyComponent />' , ( ) => {
  it ( 'renders three <Foo /> components' , ( ) => {
    const wrapper = shallow ( < MyComponent / > ) ;
    expect ( wrapper . find ( Foo ) ) . to . have . lengthOf ( 3 ) ;
  } ) ;

  it ( 'renders an `.icon-star`' , ( ) => {
    const wrapper = shallow ( < MyComponent / > ) ;
    expect ( wrapper . find ( '.icon-star' ) ) . to . have . lengthOf ( 1 ) ;
  } ) ;

  it ( 'renders children when passed in' , ( ) => {
    const wrapper = shallow ( (
      < MyComponent >
        < div className = "unique" / >
      < / MyComponent >
    ) ) ;
    expect ( wrapper . contains ( < div className = "unique" / > ) ) . to . equal ( true ) ;
  } ) ;

  it ( 'simulates click events' , ( ) => {
    const onButtonClick = sinon . spy ( ) ;
    const wrapper = shallow ( < Foo onButtonClick = { onButtonClick } / > ) ;
    wrapper . find ( 'button' ) . simulate ( 'click' ) ;
    expect ( onButtonClick ) . to . have . property ( 'callCount' , 1 ) ;
  } ) ;
} ) ;

اقرأ وثائق API الكاملة

عرض دوم الكامل

 import React from 'react' ;
import sinon from 'sinon' ;
import { expect } from 'chai' ;
import { mount } from 'enzyme' ;

import Foo from './Foo' ;

describe ( '<Foo />' , ( ) => {
  it ( 'allows us to set props' , ( ) => {
    const wrapper = mount ( < Foo bar = "baz" / > ) ;
    expect ( wrapper . props ( ) . bar ) . to . equal ( 'baz' ) ;
    wrapper . setProps ( { bar : 'foo' } ) ;
    expect ( wrapper . props ( ) . bar ) . to . equal ( 'foo' ) ;
  } ) ;

  it ( 'simulates click events' , ( ) => {
    const onButtonClick = sinon . spy ( ) ;
    const wrapper = mount ( (
      < Foo onButtonClick = { onButtonClick } / >
    ) ) ;
    wrapper . find ( 'button' ) . simulate ( 'click' ) ;
    expect ( onButtonClick ) . to . have . property ( 'callCount' , 1 ) ;
  } ) ;

  it ( 'calls componentDidMount' , ( ) => {
    sinon . spy ( Foo . prototype , 'componentDidMount' ) ;
    const wrapper = mount ( < Foo / > ) ;
    expect ( Foo . prototype . componentDidMount ) . to . have . property ( 'callCount' , 1 ) ;
    Foo . prototype . componentDidMount . restore ( ) ;
  } ) ;
} ) ;

اقرأ وثائق API الكاملة

ترميز ثابت

 import React from 'react' ;
import { expect } from 'chai' ;
import { render } from 'enzyme' ;

import Foo from './Foo' ;

describe ( '<Foo />' , ( ) => {
  it ( 'renders three `.foo-bar`s' , ( ) => {
    const wrapper = render ( < Foo / > ) ;
    expect ( wrapper . find ( '.foo-bar' ) ) . to . have . lengthOf ( 3 ) ;
  } ) ;

  it ( 'renders the title' , ( ) => {
    const wrapper = render ( < Foo title = "unique" / > ) ;
    expect ( wrapper . text ( ) ) . to . contain ( 'unique' ) ;
  } ) ;
} ) ;

اقرأ وثائق API الكاملة

رد الفعل السنانير دعم

يدعم الإنزيم خطافات رد الفعل مع بعض القيود في .shallow() بسبب مشكلات المنبع في العارض الضحل في React:

• لا يتم استدعاء useEffect() و useLayoutEffect() في العارض الضحل React. قضية ذات صلة

• useCallback() لا يذكر رد الاتصال في React Shalow Renderer. قضية ذات صلة

ReactTestUtils.act() التفاف

إذا كنت تستخدم React 16.8+ و .mount() .invoke() فسوف يلف الإنزيم واجهات ReactTestUtils.act() التطبيقات بما في ذلك .simulate() .setProps() .setContext() لالتفاف يدويًا.

نمط شائع لإحداث معالجات مع .act() والتأكيد هو:

 const wrapper = mount ( < SomeComponent / > ) ;
act ( ( ) => wrapper . prop ( 'handler' ) ( ) ) ;
wrapper . update ( ) ;
expect ( /* ... */ ) ;

لا يمكننا أن نلف نتيجة .prop() (أو .props() ) مع .act() في الإنزيم داخليًا لأنه سيؤدي إلى كسر المساواة بين القيمة التي تم إرجاعها. ومع ذلك ، يمكنك استخدام .invoke() لتبسيط الكود:

 const wrapper = mount ( < SomeComponent / > ) ;
wrapper . invoke ( 'handler' ) ( ) ;
expect ( /* ... */ ) ;

مستقبل

إنزيم مستقبل

المساهمة

انظر دليل المساهمين

في البرية

يمكن للمنظمات والمشاريع التي تستخدم enzyme أن تدرج نفسها هنا.

رخصة

معهد ماساتشوستس للتكنولوجيا