测试整个表格用酶反应成分细胞

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

如何测试笑话/酶中的每个细胞？ 我一直在努力：

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