enzyme
1.0.0
Enzim adalah utilitas pengujian JavaScript untuk bereaksi yang membuatnya lebih mudah untuk menguji output komponen reaksi Anda. Anda juga dapat memanipulasi, melintasi, dan dalam beberapa hal mensimulasikan runtime mengingat output.
API Enzyme dimaksudkan untuk menjadi intuitif dan fleksibel dengan meniru API JQuery untuk manipulasi dan traversal DOM.
Apakah Anda di sini untuk memeriksa apakah enzim yang kompatibel dengan React 16? Apakah Anda saat ini menggunakan enzim 2.x? Besar! Lihatlah Panduan Migrasi kami untuk bantuan pindah ke Enzim V3 di mana React 16 didukung.
Untuk memulai dengan enzim, Anda dapat menginstalnya melalui NPM. Anda perlu menginstal enzim bersama dengan adaptor yang sesuai dengan versi React (atau pustaka komponen UI lainnya) yang Anda gunakan. Misalnya, jika Anda menggunakan enzim dengan React 16, Anda dapat menjalankan:
npm i --save-dev enzyme enzyme-adapter-react-16 Setiap adaptor mungkin memiliki dependensi rekan tambahan yang perlu Anda instal juga. Misalnya, enzyme-adapter-react-16 memiliki ketergantungan rekan pada react dan react-dom .
Saat ini, enzim memiliki adaptor yang memberikan kompatibilitas dengan React 16.x , React 15.x , React 0.14.x dan React 0.13.x
Adaptor berikut secara resmi disediakan oleh enzim, dan memiliki kompatibilitas berikut dengan bereaksi:
| Paket Adaptor Enzim | React SEMVER Compatibility |
|---|---|
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 |
Akhirnya, Anda perlu mengkonfigurasi enzim untuk menggunakan adaptor yang Anda inginkan. Untuk melakukan ini, Anda dapat menggunakan API configure(...) .
import Enzyme from 'enzyme' ;
import Adapter from 'enzyme-adapter-react-16' ;
Enzyme . configure ( { adapter : new Adapter ( ) } ) ;Dimungkinkan bagi masyarakat untuk membuat adaptor tambahan (non-resmi) yang akan membuat enzim bekerja dengan perpustakaan lain. Jika Anda telah membuatnya dan tidak termasuk dalam daftar di bawah ini, jangan ragu untuk membuat PR ke readme ini dan menambahkan tautan ke sana! Adaptor Pihak Ketiga yang Dikenal adalah:
| Paket adaptor | Untuk perpustakaan | Status |
|---|---|---|
enzyme-adapter-preact-pure | preact | (stabil) |
enzyme-adapter-inferno | inferno | (Bekerja sedang berlangsung) |
Enzim tidak terpidana mengenai pelari uji mana yang Anda gunakan, dan harus kompatibel dengan semua pelari uji utama dan perpustakaan pernyataan di luar sana. Dokumentasi dan contoh untuk enzim menggunakan mocha dan chai, tetapi Anda harus dapat memperkirakan ke kerangka pilihan Anda.
Jika Anda tertarik menggunakan enzim dengan pernyataan khusus dan fungsi kenyamanan untuk menguji komponen reaksi Anda, Anda dapat mempertimbangkan untuk menggunakan:
chai-enzyme dengan mocha/chai.jasmine-enzyme dengan Jasmine.jest-enzyme dengan bercanda.should-enzyme untuk harus.js.expect-enzyme untuk diharapkan.Menggunakan enzim dengan mocha
Menggunakan enzim dengan karma
Menggunakan enzim dengan browserifikasi
Menggunakan enzim dengan systemjs
Menggunakan enzim dengan webpack
Menggunakan enzim dengan JSDOM
Menggunakan enzim dengan Bereaksi asli
Menggunakan enzim dengan bercanda
Menggunakan enzim dengan lab
Menggunakan enzim dengan pita dan 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 ) ;
} ) ;
} ) ;Baca dokumentasi API lengkap
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 ( ) ;
} ) ;
} ) ;Baca dokumentasi API lengkap
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' ) ;
} ) ;
} ) ;Baca dokumentasi API lengkap
Enzim mendukung kait bereaksi dengan beberapa keterbatasan .shallow() karena masalah hulu di renderer dangkal React:
useEffect() dan useLayoutEffect() tidak dipanggil dalam react renderer yang dangkal. Masalah terkait
useCallback() tidak memoize callback di react renderer dangkal. Masalah terkait
ReactTestUtils.act() Jika Anda menggunakan React 16.8+ dan .mount() , enzim akan membungkus API termasuk .simulate() , .setProps() , .setContext() , .invoke() dengan ReactTestUtils.act() jadi Anda tidak perlu untuk membungkusnya secara manual.
Pola umum untuk memicu penangan dengan .act() dan menegaskan adalah:
const wrapper = mount ( < SomeComponent / > ) ;
act ( ( ) => wrapper . prop ( 'handler' ) ( ) ) ;
wrapper . update ( ) ;
expect ( /* ... */ ) ; Kami tidak dapat membungkus hasil .prop() (atau .props() ) dengan .act() dalam enzim secara internal karena akan memecah kesetaraan nilai yang dikembalikan. Namun, Anda bisa menggunakan .invoke() untuk menyederhanakan kode:
const wrapper = mount ( < SomeComponent / > ) ;
wrapper . invoke ( 'handler' ) ( ) ;
expect ( /* ... */ ) ;Masa depan enzim
Lihat Panduan Kontributor
Organisasi dan proyek menggunakan enzyme dapat mendaftar sendiri di sini.
Mit
