测试整个表格用 jest 和 Enzyme 反应组件单元格

Question

我正在尝试测试反应组件中的各个行和单元格，组件的“返回”如下所示：

return (
    <div className="app-body">
       <table className="grid">
           <tbody>
               {grid.map((row, rowIdx) => {
                   return <tr className="grid-row" key={rowIdx}>
                       {row.map((node, nodeIdx) => {
                           const { row, col } = node;
                               return <Node
                                   key={nodeIdx}
                                   row={row}
                                   col={col}></Node>
                            })}
                        </tr>
                    })}
                </tbody>
            </table>
        </div>
    );

如何在 jest / Enzyme 中测试每个单元格？ 我一直在尝试：

describe('test MyComponent', () => {
    const wrapper = render(<MyComponent />);
    const table = wrapper.find('table');
    const row = render(<tr />)
    const node = render(<Node />);

    it('table grid', () => {
        expect(table).toHaveLength(1);
        expect(row).toHaveLength(1);
        expect(node).toHaveLength(1);
    });
});

为什么它只需要一个节点？ 如何收集表中的所有节点？

Answer 1

预期为 1，因为只有 1 个 table 元素要查找（对于 expect(table)）。对于另外两个（row 和 node），您只是渲染单个元素（完全独立于您的 MyComponent。如果您要计算 MyComponent 中的表、行和节点的数量，请尝试像这样：

describe('test MyComponent', () => {
    const wrapper = mount(<MyComponent />);
    const table = wrapper.find('table');
    const row = table.find('tr')
    const node = table.find(Node)

    it('table grid', () => {
        expect(table).toHaveLength(1);
        expect(row).toHaveLength(whateverYouExpect);
        expect(node).toHaveLength(whateverYouExpect);
    });
});