用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);
    });
});