6.4 KiB
| id | title | permalink | prev | next |
|---|---|---|---|---|
| test-utils-ko-KR | 테스트 유틸리티 | test-utils-ko-KR.html | two-way-binding-helpers-ko-KR.html | clone-with-props-ko-KR.html |
React.addons.TestUtils는 선택한 테스트 프레임워크(React는 Jest를 사용)에서 React 컴포넌트를 테스트하기 쉽게 합니다.
Simulate
Simulate.{eventName}(DOMElement element, object eventData)
DOM 노드에 이벤트 디스패치하는 것을 시뮬레이트합니다. 선택적으로 eventData를 통해 이벤트 데이터도 처리할 수 있습니다. 아마 ReactTestUtils에서 가장 유용한 유틸리티일 것 입니다.
사용 예:
var node = ReactDOM.findDOMNode(this.refs.input);
React.addons.TestUtils.Simulate.click(node);
React.addons.TestUtils.Simulate.change(node, {target: {value: 'Hello, world'}});
React.addons.TestUtils.Simulate.keyDown(node, {key: "Enter"});
Simulate에는 React가 이해하는 모든 이벤트에 대해 메소드가 있습니다.
renderIntoDocument
ReactComponent renderIntoDocument(ReactElement instance)
문서의 detach된 DOM 노드에 컴포넌트를 렌더합니다. 이 기능은 DOM을 필요로 합니다.
mockComponent
object mockComponent(function componentClass, string? mockTagName)
목 컴포넌트 모듈을 이 메소드에 넘겨 더미 React 컴포넌트로 사용할 수 있도록 합니다. 이 더미는 유용한 메소드와 함께 사용해 기능을 보강할 수 있습니다. 일반적인 렌더링과는 다르게, 컴포넌트는 제공된 자식을 포함하는 평범한 <div>가 됩니다. (mockTagName을 통해 div가 아닌 다른 태그를 지정해 줄 수도 있습니다.)
isElement
boolean isElement(ReactElement element)
element가 ReactElement면 true를 리턴합니다.
isElementOfType
boolean isElementOfType(ReactElement element, function componentClass)
element가 React componentClass 타입인 ReactElement면 true를 리턴합니다.
isDOMComponent
boolean isDOMComponent(ReactComponent instance)
instance가 (<div>나 <span>같은) DOM 컴포넌트면 true를 리턴합니다.
isCompositeComponent
boolean isCompositeComponent(ReactComponent instance)`
instance가 (React.createClass()로 생성된) 복합 컴포넌트면 true를 리턴합니다.
isCompositeComponentWithType
boolean isCompositeComponentWithType(ReactComponent instance, function componentClass)
instance가 (React.createClass()로 생성된) 복합 컴포넌트고 React componentClass 타입이면 true를 리턴합니다.
findAllInRenderedTree
array findAllInRenderedTree(ReactComponent tree, function test)
tree안의 모든 컴포넌트에서 test(component)가 true인 모든 컴포넌트를 모읍니다. 이것만으로는 그렇게 유용하지 않습니다만, 다른 테스트 유틸와 같이 사용합니다.
scryRenderedDOMComponentsWithClass
array scryRenderedDOMComponentsWithClass(ReactComponent tree, string className)
렌더된 트리의 모든 컴포넌트 인스턴스 중에서 클래스 이름이 className인 DOM 컴포넌트들을 찾습니다.
findRenderedDOMComponentWithClass
ReactComponent findRenderedDOMComponentWithClass(ReactComponent tree, string className)
scryRenderedDOMComponentsWithClass()와 비슷하지만 하나의 결과만 기대될 때 사용합니다. 하나의 결과를 리턴하거나 한개 이상의 결과가 나온 경우에는 예외를 던집니다.
scryRenderedDOMComponentsWithTag
array scryRenderedDOMComponentsWithTag(ReactComponent tree, string tagName)
렌더된 트리의 모든 컴포넌트 인스턴스중에서 태그 이름이 tagName인 DOM 컴포넌트들을 찾습니다.
findRenderedDOMComponentWithTag
ReactComponent findRenderedDOMComponentWithTag(ReactComponent tree, string tagName)
scryRenderedDOMComponentsWithTag()와 비슷하지만 하나의 결과만 기대될 때 사용합니다. 하나의 결과를 리턴하거나 한개 이상의 결과가 나온 경우에는 예외를 던집니다.
scryRenderedComponentsWithType
array scryRenderedComponentsWithType(ReactComponent tree, function componentClass)
타입이 componentClass인 모든 컴포넌트 인스턴스를 찾습니다.
findRenderedComponentWithType
ReactComponent findRenderedComponentWithType(ReactComponent tree, function componentClass)
scryRenderedComponentsWithType()와 비슷하지만 하나의 결과만 기대될 때 사용합니다. 하나의 결과를 리턴하거나 한개 이상의 결과가 나온 경우에는 예외를 던집니다.
얕은 렌더링
얕은 렌더링은 "한 단계 깊이의" 컴포넌트를 렌더할 수 있는 실험적인 기능입니다. 자식 컴포넌트가 인스턴스화 되거나 렌더되는 등의 동작에 대한 걱정 없이 렌더 메소드가 반환하는 것만 검증합니다. 이 기능은 DOM이 필요하지 않습니다.
ReactShallowRenderer createRenderer()
테스트에서 얕은 렌더러를 생성하고자 할때 호출합니다. 이를 이벤트와 업데이트에 스스로 반응하는 컴포넌트를 렌더하기 위한 "장소"라고 생각할 수 있습니다.
shallowRenderer.render(ReactElement element)
ReactDOM.render와 유사합니다.
ReactComponent shallowRenderer.getRenderOutput()
render가 호출 된 후, 얕게 렌더된 결과물을 반환합니다. 그 후엔 결과물에 대한 검증을 시작할 수 있습니다. 예를 들어 컴포넌트의 렌더 메소드가 다음을 반환한다면:
<div>
<span className="heading">Title</span>
<Subcomponent foo="bar" />
</div>
그 후에는 검증할 수 있습니다:
result = renderer.getRenderOutput();
expect(result.type).toBe('div');
expect(result.props.children).toEqual([
<span className="heading">Title</span>,
<Subcomponent foo="bar" />
]);
현재 얕은 테스트는 refs를 지원하지 않는 등 몇가지 제약사항이 있습니다. 우리는 이 기능을 빠르게 먼저 배포하고 React 커뮤니티의 피드백을 받아 나아갈 방향을 찾고자 합니다.