如何匹配@testing-library/react中的React节点？

Question

我想测试prop是否正确地增加了节点值，然后传递给了组件。问题是，即使测试和组件具有相同的节点，它也会被jest识别为不同的节点。

基本上，我的组件呈现以下内容：

function MyComponent({columns}){
   let columnsWithDescriptions = columns.map(c => ({
      ...c,
      description: <div>{c.name} - {c.last_name}</div>
   });

   return <Table columns={columnsWithDescriptions} />
}

然后我执行in测试：

test('check props', function(){
   render(<MyComponent columns={[{name: 'abc', last_name: 'def'}]} />
   expect(Table).toHaveBeenCalledWith({
     columns: [{name: 'abc', last_name: 'def', description: <div>abc - def</div>}],
   }); 
});

它几乎可以工作，但失败了，因为节点内部包含了一个不同的字符串：

                "description": <div>
        -         abc | def
        +         abc
        +          | 
        +         def
                </div>,

你对如何解决这个问题有什么建议吗？

Answer 1

经过一番调查，我找到了解决办法。假设这两个元素相等是错误的。在代码中：

const name = 'abc';
const last = 'edf';
<div> {name} - {last} </div> !== <div> abc - edf </div>

第一个节点有3个子节点，第二个节点只有一个子节点。

我在测试中修复了它：

<div> {name} - {last} </div> === <div> {'abc'} - {'edf'} </div>