Làm thế nào để chế nhạo Phản ứng phương pháp thành phần với jest và enzyme

Question

Tôi có một thành phần phản ứng (điều này được đơn giản hóa để chứng minh vấn đề):

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

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

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

Bây giờ tôi muốn kiểm tra rằng handleNameInput() cuộc gọi searchValue với giá trị cung cấp .

Để thực hiện việc này, tôi muốn tạo một jest mock function để thay thế phương thức thành phần.

Đây là trường hợp thử nghiệm của tôi cho đến nay:

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

Nhưng tất cả tôi nhận được trong giao diện điều khiển là SyntaxError:

Lỗi Cú pháp

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) 

Vì vậy, câu hỏi của tôi là, làm thế nào để tôi chế phương pháp thành phần với enzyme?

Answer 1

Phương pháp này có thể được chế giễu bằng cách này:

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

Bạn cũng cần phải gọi .update trên wrapper của các thành phần kiểm tra để đăng ký chức năng giả đúng cách.

Lỗi cú pháp đến từ việc xác nhận sai (bạn cần gán phương thức cho cá thể). Các vấn đề khác của tôi đã đến từ việc không gọi .update() sau khi chế nhạo phương thức.

Answer 2

@ câu trả lời Miha đã làm việc với một sự thay đổi nhỏ:

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