チャイ他のコンポーネント内のコンポーネントのタイプをテストする

Question

HTMLタグ<Tr></Tr>をテストしようとしています。ここに私のコードは次のとおりです。ここ

const children = (<h1>Test</h1>); 
    const renderComponent =() => shallow(
     <Table> 
     <Tr> 
      {children} 
     </Tr> 
     </Table> 
    ); 


    describe("<Tr />",() => { 
     it("should render a <Tr> tag within a <Table> tag",() => { 
     const renderedComponent = renderComponent(); 
     expect(renderedComponent.type()).toEqual("tr"); 
     }); 
    }); 

問題は、私のテストはrenderedComponentのタイプとしてタグ<Table>をターゲットにし、したがって、失敗したテストを返すということです。

expectテストでは、最初の<Table>ではなく、2番目のタグ<Tr>が見つかるようにテストを変更するにはどうすればよいですか？

は注：私はのJsとして、CSSが含まれているコンポーネントを反応させるの最も基本的にHTMLタグを変換するために私を可能にしますスタイルの成分という名前の新しいライブラリを使用しています

。

import styled from "styled-components"; 

    const Table = styled.table` 
     border: 1px solid black; 
     border-collapse: collapse; 
     width: 100% 
    `; 

    export default Table; 

したがって、私のコンポーネントは独自のタグに限定されており、まだ何も含まれていません。

Answer 1

大文字の場合TableとTrの場合はJSX compiler expects to have such component definedです。 HTMLタグには小文字を使用してください。私にとって

この作品：

const children = (<h1>Test</h1>); 
const renderComponent =() => shallowWithIntl(
    <table> 
     <tr> 
      {children} 
     </tr> 
    </table> 
); 


describe('<Tr />',() => { 
    it('should render a <Tr> tag ',() => { 
     const renderedComponent = renderComponent(); 
     expect(renderedComponent.type()).to.equal('table'); 
    }); 

    it('should have children',() => { 
     const renderedComponent = renderComponent(); 
     expect(renderedComponent.contains(children)).to.equal(true); 
    }); 
});