Протестируйте целую таблицу ячеек компонентов React с помощью jest и Enzyme - PullRequest
Новая
       3

Протестируйте целую таблицу ячеек компонентов React с помощью jest и Enzyme

1 голос
/ 06 мая 2020

Я пытаюсь протестировать отдельные строки и ячейки в компоненте реакции, «возврат» компонента выглядит так: 

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

, почему он ожидает только ОДИН узел? как собрать все узлы в таблицу?

1 Ответ

0 голосов
/ 06 мая 2020

Ожидается 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);
    });
});
...