web-dev-qa-db-ja.com

jestと酵素でReactコンポーネントメソッドをモックする方法

私は反応コンポーネントを持っています（これは問題を実証するために簡略化されています）：

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

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

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

ここで、handleNameInput()が指定された値でsearchDishを呼び出すことをテストします。

これを行うには、コンポーネントメソッドを置き換える jest mock function を作成します。

これまでの私のテストケースは次のとおりです。

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)

だから私の質問は、どのように酵素でコンポーネントメソッドを適切にモックするのですか？

javascriptreactjsjestjsenzyme
42
Miha Šušteršič

この方法は、次の方法でモックできます。

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()を呼び出さないことから生じていました。

77
Miha Šušteršič

wrapper.update();をwrapper.instance().forceUpdate();に置き換える必要があります

9
Aleh

@Mihaの答えは小さな変更で機能しました：

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