Question

我正在尝试使用酶测试我的React组件。该组件具有以下渲染方法：

render() {
        let modal = null;
        let modalTitle = this.state.isEditing ? 'Edit Event' : 'Add Event';
        if (this.state.showModal) {
            modal = (<div className="event-modal">
                <Modal show={this.state.showModal} onHide={this.closeModal}>
                   ...
                 </Modal>
            </div>);
        }
        return (
            <div style={{height: '500px', width: '1000px'}}>
                <BigCalendar
                    events={this.props.events}
                    startAccessor='startDate'
                    endAccessor='endDate'
                    onSelectSlot={this.onDayClick}
                    selectable={true}
                    onSelectEvent={this.onEventClick}
                />
                {modal}
            </div>
        );
    }

在我的测试用例中，我想验证showmodal = true时是否显示模态，而酶建议你使用instance（）使组件处于正确状态以进行详细测试，所以我尝试使用instance（）然后更新（），但它没有用。我最终工作的测试用例是使用setState（），如果可能，酶建议不要使用。这是我的测试用例：

it('render should display modal if showModal is true', () => {
        const calendar = shallow(<CalendarPres events={[]}/>);
        //The commented out code does not work, but I'm not sure why
        //calendar.instance().state.showModal = true;
        //calendar.update();
        calendar.setState({showModal: true});
        expect(calendar.find('.event-modal').exists()).toBe(true);
    });

setState（）有效，但是使用instance（）然后使用update（）却不行。为什么update（）没有正确地重新渲染我的组件？

Answer 1

酵素建议如你所说，但这不会那么好

 calendar.instance().state.showModal = true;

因为我们应该直接设置状态的唯一情况是在组件构造函数中。

我们应该始终使用在设置状态时异步工作的setState()。

来自here：1和2

只有在需要更新的情况下，update()方法才有效。看起来状态在update()点火时没有改变。

在酶中无法使用instance（）更新状态.state和update（）

1 个答案: