Как проверить поведение компонентов, возвращаемых через функцию в jest - PullRequest
Новая
       34

Как проверить поведение компонентов, возвращаемых через функцию в jest

0 голосов
/ 05 марта 2020

Я использую PrimeReact компоненты для чтения таблицы данных с кнопками действий для каждой строки; метод рендеринга возвращает DataTable с Column 

return (
    <div className="p-grid card">
        <div className="p-col-12">
            <DataTable
                value={this.state.blogs}
                header={header}
                responsive={true}
                paginator={true}
                rows={10}
                rowsPerPageOptions={[5, 10, 20]}
            >
                <Column
                    field="title"
                    header="Title"
                    style={{ textAlign: "center" }}
                />
                <Column
                    field="publish_date"
                    header="Publish Date"
                    body={this.dateTemplate}
                    style={{ textAlign: "center" }}
                />
                <Column
                    header="Blog Actions"
                    body={this.actionTemplate}
                    style={{ textAlign: "center" }}
                />
            </DataTable>
        </div>
    </div>
);

actionTemplate возвращает либо Publish, либо Unpublish; Кнопки Delete и Edit для каждой строки в таблице данных. 

actionTemplate = (rowData) => {
    return (
        <div id="actionButtons">
            {rowData.published ? (
                <Button
                    type="button"
                    icon="pi pi-minus-circle"
                    className="p-button-warning"
                    style={{ marginRight: ".5em" }}
                    tooltip="Unpublish"
                />
            ) : (
                <Button
                    type="button"
                    icon="pi pi-plus-circle"
                    className="p-button-success"
                    style={{ marginRight: ".5em" }}
                    tooltip="Publish"
                />
            )}
            <Button
                type="button"
                icon="pi pi-trash"
                className="p-button-danger"
                style={{ marginRight: ".5em" }}
                onClick={this.showDeleteDialog}
            />
            <Button
                type="button"
                icon="pi pi-pencil"
                className="p-button-info"
            />
        </div>
    );
}

Предполагается, что кнопка удаления открывает диалоговое окно для подтверждения, а затем удаляет строку в таблице данных путем установки displayBlockScroll свойство true для события click.

Однако модульному тесту не удалось найти ни одну из этих кнопок 

it("opens delete blog popup on clicking delete button", () => {
    axios.get.mockImplementationOnce(() => Promise.resolve(response));
    const grid = mount(<Grid />);
    grid.find(".p-button-danger").at(0).simulate('click');
    expect(grid.state().displayBlockScroll).toEqual(true);
});

с ошибкой

Method “simulate” is meant to be run on 1 node. 0 found instead.

Фактически метод find работает только до компонента DataTable, т.е. только это утверждение проходит

expect(grid.find(DataTable)).toHaveLength(1);

...