Блог

Я хочу проверить, правильно ли опора обогащена значением узла, а затем передана компоненту. Проблема в том, что, даже если тест и компонент имеют один и тот же узел, шутка распознает его как отличающийся.

В принципе, мой компонент отображает следующее:

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

   return <Table columns={columnsWithDescriptions} />
}
 

Затем я выполняю тест in then:

 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>,
 

У вас есть какие-либо предложения о том, как это исправить?

После некоторого расследования я нашел решение. Предположение о том, что эти два элемента равны, было неверным. В коде:

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

Первый узел имеет 3 дочерних элемента, второй узел имеет только одного дочернего элемента.

Я исправил это в тестовом сравнении:

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