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

Question

我是 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 搜索字段、分页按钮、表格信息、表格长度、排序元素编写单元测试。

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

但是为了测试 DataTable Search 输入字段，我发现 input 元素，它没有被写入并且将被动态附加，所以我不知道如何编写单元测试！？

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

问候 [Shashidhar]

Answer 1

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