如何测试条件渲染组件的状态转换

Question

我有一个删除确认面板，默认情况下，该面板在加载组件时处于禁用状态，并且仅在单击删除按钮时才显示]]

{this.state.deleteConfirmation && (
    <div id="confirmation">
        <Checkbox
            inputId="deleteBlogConfirmation"
            checked={this.state.confirmation}
            onChange={this.toggleConfirmation}
        ></Checkbox>
        <label
            htmlFor="deleteBlogConfirmation"
            className="p-checkbox-label"
        >
            Are You Sure?
        </label>
        <Button
            label="Yes"
            icon="pi pi-check"
            disabled={!this.state.confirmation}
            onClick={this.props.onDeleteConfirm}
            className="p-button-danger"
        />
        <Button
            label="No"
            icon="pi pi-times"
            onClick={this.hideDeleteConfirmation}
            className="p-button-secondary"
        />
    </div>
)}
加载组件时，该值为true

this.state = {
    confirmation: false,
    deleteConfirmation: false
};
如果用户在确认时单击“否”，那么hideDeleteConformation方法将隐藏该面板

hideDeleteConfirmation() {
    this.setState({ deleteConfirmation: false });
}
[当我断言deleteConfirmation为错误且错误为// , Received: undefined时，测试失败。>
it("hides delete confirmation panel on clicking no button", () => {
    const mockDialogFn = jest.fn();
    const actionButtons = mount(
        <Router>
            <BlogActionButtons
                rowData={rowData}
                onDeleteConfirm={mockDialogFn}
            />
        </Router>
    );
    actionButtons.find(".p-button-danger").at(0).simulate('click');
    expect(actionButtons.props().deleteConfirmation).toBeTruthy(); // , Received: undefined at this line
    actionButtons.find('.p-button-secondary').at(0).simulate('click');
    expect(actionButtons.props().deleteConfirmation).toBeFalsy();
});
如果我切换到
expect(actionButtons.state().deleteConfirmation).toBeTruthy();
同一行出现错误TypeError: Cannot read property 'deleteConfirmation' of null。 
如何通过单击相应按钮来测试deleteConfirmation再次变为true / false。

我有一个删除确认面板，默认情况下，该面板在加载组件时处于禁用状态，并且仅在单击删除按钮时才显示。{this.state.deleteConfirmation &&（

< [

.props()通过名称获取值，而不是其调用的函数。这就是您要寻找的：

expect(actionButtons.prop('onClick')).toBeTruthy()

Answer 1

.props()通过名称获取值，而不是其调用的函数。这就是您要寻找的：