enzyme

เอนไซม์

เอนไซม์เป็นยูทิลิตี้การทดสอบ JavaScript สำหรับ React ที่ทำให้ง่ายต่อการทดสอบเอาต์พุตของส่วนประกอบปฏิกิริยาของคุณ นอกจากนี้คุณยังสามารถจัดการสำรวจและในบางวิธีจำลองรันไทม์ได้รับผลลัพธ์

API ของเอนไซม์นั้นมีความหมายและยืดหยุ่นโดยการเลียนแบบ API ของ JQuery สำหรับการจัดการ DOM และการสำรวจ

การอัพเกรดจากเอนไซม์ 2.x หรือตอบสนอง <16

คุณมาที่นี่เพื่อตรวจสอบว่าเอนไซม์เข้ากันได้กับ React 16 หรือไม่? คุณกำลังใช้เอนไซม์ 2.x หรือไม่? ยอดเยี่ยม! ตรวจสอบคู่มือการย้ายถิ่นของเราเพื่อขอความช่วยเหลือในการย้ายไปยัง Enzyme V3 ซึ่งรองรับ React 16

การติดตั้ง

ในการเริ่มต้นด้วยเอนไซม์คุณสามารถติดตั้งผ่าน NPM คุณจะต้องติดตั้งเอนไซม์พร้อมกับอะแดปเตอร์ที่สอดคล้องกับเวอร์ชันของ React (หรือไลบรารี UI ส่วนประกอบอื่น ๆ ) ที่คุณใช้ ตัวอย่างเช่นหากคุณใช้เอนไซม์กับ 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

ในที่สุดคุณต้องกำหนดค่าเอนไซม์เพื่อใช้อะแดปเตอร์ที่คุณต้องการใช้ ในการทำเช่นนี้คุณสามารถใช้ configure(...) API

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

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

อะแดปเตอร์ของบุคคลที่สาม

เป็นไปได้ที่ชุมชนจะสร้างอะแดปเตอร์เพิ่มเติม (ไม่เป็นทางการ) ที่จะทำให้เอนไซม์ทำงานกับห้องสมุดอื่น ๆ หากคุณได้ทำและไม่รวมอยู่ในรายการด้านล่างอย่าลังเลที่จะสร้าง PR ให้กับ readme นี้และเพิ่มลิงค์ลงไป! อะแดปเตอร์ของบุคคลที่สามที่รู้จักคือ:

แพ็คเกจอะแดปเตอร์	สำหรับห้องสมุด	สถานะ
enzyme-adapter-preact-pure	preact	(มั่นคง)
enzyme-adapter-inferno	inferno	(ทำงานอยู่ระหว่างดำเนินการ)

การทดสอบเอนไซม์

เอนไซม์ไม่ได้รับการแนะนำเกี่ยวกับการทดสอบนักวิ่งหรือไลบรารีการยืนยันที่คุณใช้และควรเข้ากันได้กับนักวิ่งทดสอบที่สำคัญและห้องสมุดยืนยันที่สำคัญทั้งหมด เอกสารและตัวอย่างสำหรับเอนไซม์ใช้มอคค่าและชัย แต่คุณควรจะสามารถคาดการณ์กรอบการเลือกที่คุณเลือกได้

หากคุณสนใจที่จะใช้เอนไซม์ที่มีการยืนยันที่กำหนดเองและฟังก์ชั่นความสะดวกสบายสำหรับการทดสอบส่วนประกอบที่ตอบสนองของคุณคุณสามารถพิจารณาใช้:

• chai-enzyme กับ Mocha/Chai
• jasmine-enzyme กับจัสมิน
• jest-enzyme กับ jest
• should-enzyme สำหรับควร. js
• expect-enzyme ว่าจะได้รับความคาดหวัง

ใช้เอนไซม์กับมอคค่า

ใช้เอนไซม์กับกรรม

การใช้เอนไซม์กับเบราว์เซอร์

การใช้เอนไซม์กับ SystemJS

การใช้เอนไซม์กับ webpack

ใช้เอนไซม์กับ JSDOM

การใช้เอนไซม์กับ React Native

การใช้เอนไซม์ด้วยความตลกขบขัน

ใช้เอนไซม์กับห้องปฏิบัติการ

ใช้เอนไซม์ด้วยเทปและ 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() เนื่องจากปัญหาต้นน้ำใน Renderer ของ React:

• useEffect() และ useLayoutEffect() ไม่ได้รับการเรียกใน React Renderer ปัญหาที่เกี่ยวข้อง

• useCallback() ไม่ได้บันทึกการโทรกลับใน React Renderer ปัญหาที่เกี่ยวข้อง

ReactTestUtils.act() wrap

หากคุณใช้ React 16.8+ และ .mount() เอนไซม์จะห่อ API รวมถึง .simulate() , .setProps() , .setContext() , .invoke() ด้วย ReactTestUtils.act() เพื่อห่อด้วยตนเอง

รูปแบบทั่วไปในการเรียกใช้ตัวจัดการที่มี .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 สามารถระบุตัวเองได้ที่นี่

ใบอนุญาต

มิกซ์