simulate delete material -ui 칩

Question

InputTag 구성 요소 내에 material-ui 칩 구성 요소를 삭제하는 테스트를 작성하고 싶습니다. 어떻게 그 아이디어를 얻을 수 있을까요? 이것은 지금까지 내 최고의 샷 :...

import React from 'react'; 
import InputTag from '../../src/components/InputTag.js'; 
import renderer from 'react-test-renderer'; 
import {shallow, mount} from 'enzyme'; 
import {spy} from 'sinon'; 

describe('components/InputTag',() => { 
    it('should call onRquestDelete method', (done) => { 
     const deleteTag = spy(); 
     const wrapper = mount(
       <InputTag 
        addTag={() => {}} 
        deleteTag={deleteTag} 
        changeTag={() => {}} 
        tags={[{key: "t1", label: "test"}]} 
        tag="" 
       /> 
     ); 
     expect(wrapper.find('Chip')).toHaveLength(1); 

     spy(wrapper.instance(), 'handleRequestDelete'); 
     wrapper.find('Chip').first().find('DeleteIcon').simulate('click'); 

     expect.assertions(2); 
     setTimeout(() => { 
      expect(wrapper.instance().handleRequestDelete.callCount).toEqual(1); 
      expect(deleteTag.callCount).toEqual(1); 
      done(); 
     }, 0); 
    }); 
} 

문제의 라인이

wrapper.find ('칩')는 첫 번째() ('DeleteIcon')를 찾을 시뮬레이션 ('클릭 ');

DeleteIcon 또는 handleDeleteIconClick 동작에 따라 어떻게 찾을 수 있습니까? 나는 전체 래퍼 인스턴스에서 나는 모든 SVG를 검색하기 때문에 SVG 검색으로,

// enzyme does not support touchTap currently 
    // @see https://github.com/airbnb/enzyme/issues/99 
    const node = ReactDOM.findDOMNode(
     ReactTestUtils.findRenderedDOMComponentWithTag(
      wrapper.instance(), 'svg' 
     ) 
    ); 
    ReactTestUtils.Simulate.touchTap(node); 

없는 것 같아요 최고의 샷,하지만 적어도 작동합니다

Answer 1

나는 마침내 방법을 발견