react-dom/test-utils，TypeError：無法讀取未定義的屬性'children'

Question

我使用react-dom/test-utils來測試我的反應組件。

但scryRenderedDOMComponentsWithClass返回值沒有props

和props.children財產。我做錯了什麼？

這裏是我的測試代碼：

it('renders item count correctly',() => { 
    const $$searchList = TestUtils.renderIntoDocument(<SearchList items={datas}/>) 
    const list = TestUtils.scryRenderedDOMComponentsWithClass($$searchList, 'list'); 

    expect(list.props.children).toHaveLength(4); 
    expect(items).toHaveLength(4); 

    }); 

這裏是測試結果：

● component - SearchList test suites › renders item count correctly 

    TypeError: Cannot read property 'children' of undefined 

     at Object.<anonymous> (src/components/List/__tests__/SearchList.test.jsx:17:26) 
     at Promise.resolve.then.el (node_modules/p-map/index.js:42:16) 
     at process._tickCallback (internal/process/next_tick.js:109:7) 

    component - SearchList test suites 
    ✓ loads without error (43ms) 
    ✕ renders item count correctly (18ms) 

- 更新 -

這裏是我的組件渲染：

return (
     <div className="list"> 
     { 
      items.map((item: Book, idx: number): React.ReactElement<IListProps<Book>> => { 
      return (
       <ListItem onClick={() => this.onItemClick(item, idx)} key={item.id} item={item}/> 
      ); 
      }) 
     } 
     </div> 
    ); 

Answer 1

scryRenderedDOMComp onentsWithClass不允許您在找到的組件上聲明道具，而scryRenderedComponentsWithType則支持。更多可以找到here

在迴應0.14之前，scry/find ... WithClass會返回DOM組件。隨着0.14的發佈，這些方法返回DOM節點本身。在這兩種情況下，複合材料部件的道具都不能使用。

您也可以決定使用對淺的渲染和找到你的子組件和它們的道具隨即反應過來測試utils的（scryRenderedDOMComponentsWithClass，scryRenderedDOMComponentsWithTag和scryRenderedComponentsWithType）的語法更簡單的語法酶。 你可以閱讀爲什麼和更多about it here