Question

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

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

用玩笑和酶测试整个表React组件单元

1 个答案: