时间戳

首页 > 解决方案 > 如何使用 Enzyme 和 Jest 在 React 组件中为 DataTable 编写单元测试？

jquery - 如何使用 Enzyme 和 Jest 在 React 组件中为 DataTable 编写单元测试？

问题描述

我是 React 单元测试的新手。我已经构建了一个呈现DataTable的 React 组件，它采用column names和data作为道具。我使用 Enzyme with Jest 编写了表格元素的单元测试，即PASSED. 单元测试是

describe('Client Component Testing', () => {

    let mountedClientComp;
    const clientComp = () => {
        if (!mountedClientComp) {
            mountedClientComp = mount(
                <ClientsTable/>
            );
        }
        return mountedClientComp;
    };

    it('Client component renders a table', () => {
        const table = clientComp();
        table.setState({ temp: true });
        table.update();
        expect(table.exists('table')).toEqual(true);
    });
});

但我没有得到，如何为 DataTable 搜索字段、分页按钮、表信息、表长度、排序元素编写单元测试。

tableDataTable 通过将html 标签放入 DataTable 对象来操作 DOM ，并且由于tablehtml 标签是在 React 组件中编写的，因此对 table 元素进行单元测试PASSED。

但是为了测试 DataTable Search 输入字段，我正在寻找input元素，它没有被写入并且将被动态附加，所以我没有得到如何编写单元测试！？

如何为动态添加的元素编写单元测试？

问候 [Shashidhar]

标签： jqueryreactjsdatatablesjestjsenzyme

解决方案

<ClientsTable>您可以在每个具有不同属性的测试用例中安装一个新的，并在这些相应的测试用例中找到您想要的任何东西。

推荐阅读