enzyme
1.0.0
효소는 React 구성 요소의 출력을보다 쉽게 테스트 할 수 있도록 React의 JavaScript 테스트 유틸리티입니다. 출력이 주어지면 런타임을 시뮬레이션하고, 횡단하며, 어떤면에서는 조작, 트래버스 및 어떤면에서도 시뮬레이션 할 수 있습니다.
효소의 API는 DOM 조작 및 횡단을 위해 jQuery의 API를 모방함으로써 직관적이고 유연해야합니다.
효소가 React 16과 호환되는지 여부를 확인하기 위해 여기에 있습니까? 현재 효소 2.x를 사용하고 있습니까? 엄청난! 반응 16이 지원되는 효소 V3로 이동하는 데 도움이되는 마이그레이션 가이드를 확인하십시오.
효소를 시작하려면 NPM을 통해 간단히 설치할 수 있습니다. 사용중인 React 버전 (또는 다른 UI 구성 요소 라이브러리)에 해당하는 어댑터와 함께 효소를 설치해야합니다. 예를 들어, 반응 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 와의 호환성을 제공하는 어댑터가 있습니다.
다음 어댑터는 공식적으로 효소에 의해 제공되며 반응과 다음의 호환성을 갖습니다.
| 효소 어댑터 패키지 | 반응 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 ( ) } ) ;커뮤니티는 효소가 다른 라이브러리와 함께 작동하게하는 추가 (비공식적) 어댑터를 만들 수 있습니다. 하나를 만들었고 아래 목록에 포함되지 않으면이 readme에 대한 PR을 만들고 링크를 추가하십시오! 알려진 타사 어댑터는 다음과 같습니다.
| 어댑터 패키지 | 도서관 용 | 상태 |
|---|---|---|
enzyme-adapter-preact-pure | preact | (안정적인) |
enzyme-adapter-inferno | inferno | (진행중인 작업) |
효소는 사용하는 테스트 러너 또는 어설 션 라이브러리에 대해서는 비교되지 않으며 모든 주요 테스트 러너 및 어설 션 라이브러리와 호환되어야합니다. 효소에 대한 문서와 예는 Mocha와 Chai를 사용하지만 선택의 틀에 외삽 할 수 있어야합니다.
React 구성 요소를 테스트하기 위해 맞춤형 어설 션 및 편의 기능이있는 효소 사용에 관심이 있으시면 다음을 고려할 수 있습니다.
chai-enzyme .jasmine-enzyme .jest-enzyme .should-enzyme . JS.expect-enzyme .모카와 함께 효소 사용
카르마와 함께 효소 사용
Browserify와 함께 효소 사용
Systemjs와 함께 효소 사용
웹 팩과 함께 효소 사용
JSDOM과 함께 효소 사용
React Native와 함께 효소를 사용합니다
농담으로 효소를 사용합니다
실험실과 함께 효소 사용
테이프와 아바와 함께 효소를 사용합니다
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 문서를 읽으십시오
효소는 React의 얕은 렌더러의 상류 문제로 인해 .shallow() 의 일부 제한 사항을 가진 반응 후크를 지원합니다.
useEffect() 및 useLayoutEffect() React 얕은 렌더러에서 호출되지 않습니다. 관련 문제
useCallback() React Shallow 렌더러에서 콜백을 메모 화하지 않습니다. 관련 문제
ReactTestUtils.act() 랩 REACT 16.8+ 및 .mount() 사용하는 경우 효소는 .simulate() , .setProps() , .setContext() , .invoke() ReactTestUtils.act() 하여 API를 랩핑합니다. 수동으로 포장합니다.
.act() 와 Assert를 사용하여 처리기를 트리거하는 일반적인 패턴은 다음과 같습니다.
const wrapper = mount ( < SomeComponent / > ) ;
act ( ( ) => wrapper . prop ( 'handler' ) ( ) ) ;
wrapper . update ( ) ;
expect ( /* ... */ ) ; 우리는 .prop() (또는 .props() )의 결과를 효소에서 내부적으로 .act() 로 마무리 할 수 없습니다. 그러나 .invoke() 사용하여 코드를 단순화 할 수 있습니다.
const wrapper = mount ( < SomeComponent / > ) ;
wrapper . invoke ( 'handler' ) ( ) ;
expect ( /* ... */ ) ;효소 미래
기고자 안내서를 참조하십시오
enzyme 사용하는 조직과 프로젝트는 여기에 스스로를 나열 할 수 있습니다.
MIT
