如何使用帶有Jest的酶在React Component中編寫DataTable的單元測試？

Question

我是React Unit測試的新手。 我已經構建了一個React組件來呈現DataTable ，該DataTable以column names和data作為道具。 我已經使用帶有Jest的Enzyme（即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> ，並在各個測試用例中找到所需的內容。