如何使用 jest 和 digest 模拟 React 组件方法

小能豆

如何使用 jest 和 digest 模拟 React 组件方法

javascript

我有一个反应组件（为了演示问题，这被简化了）：

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

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

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

现在我想测试使用提供的值进行的handleNameInput()调用。searchDish

为了做到这一点，我想创建一个替代组件方法的jest 模拟函数。

这是我迄今为止的测试用例：

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

但我在控制台中得到的只是SyntaxError：

语法错误

js 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)

所以我的问题是，如何正确地用酶模拟组件方法？

阅读 53

2024-06-08

共1个答案

小能豆

该方法可以用这种方式模拟：

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()在模拟方法后没有调用。

2024-06-08