IT이야기

조롱하는 방법 성분 방법을 농담과 효소로 반응시키는 방법

cyworld 2022. 3. 16. 22:05
반응형

조롱하는 방법 성분 방법을 농담과 효소로 반응시키는 방법

반응 구성 요소가 있음(이 문제는 문제를 입증하기 위해 단순화됨):

class MyComponent extends Component {
    handleNameInput = (value) => {
        this.searchDish(value);
    };

    searchDish = (value) => {
      //Do something
    }

    render() {
        return(<div></div>)
    }
}

이제 나는 그것을 시험해 보고 싶다.handleNameInput()전화를 하다searchDish제공된 가치로

이를 위해 컴포넌트 메소드를 대체하는 jest mock 기능을 만들고 싶다.

지금까지 나의 테스트 케이스는 다음과 같다.

it('handleNameInput', () => {
   let wrapper = shallow(<MyComponent/>);
   wrapper.searchDish = jest.fn();
   wrapper.instance().handleNameInput('BoB');
   expect(wrapper.searchDish).toBeCalledWith('BoB');
})

하지만 콘솔에 있는 건SyntaxError:

구문 오류

  at XMLHttpRequest.open (node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js:458:15)
  at run_xhr (node_modules/browser-request/index.js:215:7)
  at request (node_modules/browser-request/index.js:179:10)
  at DishAdmin._this.searchDish (src/main/react/components/DishAdmin.js:155:68)
  at DishAdmin._this.handleNameInput (src/main/react/components/DishAdmin.js:94:45)
  at Object.<anonymous> (src/main/react/tests/DishAdmin.test.js:122:24)

그래서 제 질문은, 어떻게 하면 효소로 성분법을 적절히 조롱할 수 있을까 하는 겁니다.

이 방법은 다음과 같이 조롱할 수 있다.

it('handleNameInput', () => {
   let wrapper = shallow(<MyComponent/>);
   wrapper.instance().searchDish = jest.fn();
   wrapper.update();
   wrapper.instance().handleNameInput('BoB');
   expect(wrapper.instance().searchDish).toBeCalledWith('BoB');
})

모의 기능을 제대로 등록하려면 시험한 부품의 포장지에 .update를 호출해야 한다.

구문 오류가 잘못된 계산에서 발생한 경우(인스턴스에 메서드를 할당해야 함).나의 다른 문제들은 전화를 하지 않는 것에서 비롯되었다..update()그 방법을 조롱한 후에

교체 필요wrapper.update();와 함께wrapper.instance().forceUpdate();

@미하의 대답은 작은 변화로 통했다.

it('handleNameInput', () => {
  let wrapper = shallow(<MyComponent/>);
  const searchDishMock = jest.fn();
  wrapper.instance().searchDish = searchDishMock;
  wrapper.update();
  wrapper.instance().handleNameInput('BoB');
  expect(searchDishMock).toBeCalledWith('BoB');
})

참조URL: https://stackoverflow.com/questions/41830165/how-to-mock-react-component-methods-with-jest-and-enzyme

반응형