차이 다른 구성 요소 내의 구성 요소 유형을 테스트하십시오.

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>이 아닌 두 번째 태그 <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); 
    }); 
});