如何在酶中等待私人功能的承诺? [英] How to wait in enzyme for a promise from a private function?

问题描述

我是 react 和任何 javascript 测试框架的新手.

我有一个简单的组件，它从 API 中检索项目并将它们显示到屏幕上.

从componentWillMount调用函数getItems().

是否可以等到 getItems() 完成后再进行断言?

ItemDetails.js

类 ItemDetails 扩展组件 {构造函数(道具){超级(道具)；这个.state = {细节: ''}}组件WillMount() {this.getItem();}获取项目(){常量 itemId = this.props.match.params.id;获取(`/api/items/${itemId}`).then(res => res.json()).then(details => this.setState({ details }));}使成为() {const details = this.state.details;返回 (
<h1>{details.title}</h1>...</div>);}}导出默认 ItemDetails；

ItemDetails.test.js

describe('ItemDetails', () => {it('应该渲染一个带有标题的 div', () => {常量细节 = {_id:1，标题:'项目名称'};fetch.mockResponseOnce(JSON.stringify(details));const wrapper = mount(<ItemDetails match={{ params: {id: 1} }}/>);期望(wrapper.find('div').find('h1').text()).toBe('ItemName');});});

解决方案

你可以试试:

describe('ItemDetails', () => {it('应该渲染一个带有标题的 div', () => {常量细节 = {_id:1，标题:'项目名称'};fetch.mockResponseOnce(JSON.stringify(details));const wrapper = shallow(<ItemDetails match={{ params: {id: 1} }}/>);//手动调用函数wrapper.instance().getItem();//更新以重新渲染组件包装器.更新()；期望(wrapper.find('div').find('h1').text()).toBe('ItemName');});});

如果没有帮助，我认为您需要从函数中返回 Promise (基于这个例子):

getItem() {常量 itemId = this.props.match.params.id;返回获取(`/api/items/${itemId}`).then(res => res.json()).then(details => this.setState({ details }));}描述('ItemDetails', () => {it('应该渲染一个带有标题的 div', () => {常量细节 = {_id:1，标题:'项目名称'};fetch.mockResponse(JSON.stringify(details));//响应被调用两次const wrapper = mount(<ItemDetails match={{ params: {id: 1} }}/>);//返回 Promise 所以 Jest 会等到它完成return wrapper.instance().getItem().then(() => {包装器.更新()；}).then(() => {期望(wrapper.find('div').find('h1').text()).toBe('ItemName');})});});

I'm a novice at react and any javascript testing frameworks.

I have a simple component that retrieves an item from the API and shows them to the screen.

The function getItems() is called from componentWillMount.

Is it possible to wait until getItems() has finished before making my assertions?

ItemDetails.js

class ItemDetails extends Component {
    constructor(props) {
        super(props);
        this.state = {
            details: ''
        }
    }

    componentWillMount() {
        this.getItem();
    }

    getItem() {
        const itemId = this.props.match.params.id;
        fetch(`/api/items/${itemId}`)
            .then(res => res.json())
            .then(details => this.setState({ details }));
    }

    render() {
        const details = this.state.details;
        return (
            <div>
                <h1>{details.title}</h1>
                ...
            </div>
        );
    }
}

export default ItemDetails;

ItemDetails.test.js

describe('ItemDetails', () => {
    it('should render a div with title', () => {
        const details = {
            _id: 1,
            title: 'ItemName'
        };
        fetch.mockResponseOnce(JSON.stringify(details));
        const wrapper = mount(<ItemDetails match={{ params: {id: 1} }} />);
        expect(wrapper.find('div').find('h1').text()).toBe('ItemName');

    });
});

解决方案

Could you try:

describe('ItemDetails', () => {
    it('should render a div with title', () => {
        const details = {
            _id: 1,
            title: 'ItemName'
        };
        fetch.mockResponseOnce(JSON.stringify(details));
        const wrapper = shallow(<ItemDetails match={{ params: {id: 1} }} />);      

        // manually call function
        wrapper.instance().getItem();
        // update to re-render component
        wrapper.update();

        expect(wrapper.find('div').find('h1').text()).toBe('ItemName');    
    });
});

If it doesn't help I think you will need to return Promise from your function (base on this example):

getItem() {
    const itemId = this.props.match.params.id;
    return fetch(`/api/items/${itemId}`)
        .then(res => res.json())
        .then(details => this.setState({ details }));
}


describe('ItemDetails', () => {
    it('should render a div with title', () => {
        const details = {
            _id: 1,
            title: 'ItemName'
        };
        fetch.mockResponse(JSON.stringify(details)); //response gets called twice
        const wrapper = mount(<ItemDetails match={{ params: {id: 1} }} />);

        // return Promise so Jest will wait until it's finished
        return wrapper.instance().getItem().then(() => {
          wrapper.update();
        }).then(() => {
         expect(wrapper.find('div').find('h1').text()).toBe('ItemName'); 
        })
    });
});

这篇关于如何在酶中等待私人功能的承诺?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！