내가 관심 영역 내 모든 코드를 잘라 있지만, 본질적으로 (그 같은 코드 외모는 아무것도하지하려고하면 용서 그래서) 나는 몇 통과 할 때 <Navbar.Tab comopnent={null}/>에 <Navbar></Navbar>그것이 농담과 효소의 React.Children를 사용하여 단위 테스트를 시도 .count는> 1 개의 하위 항목이 있음을 .type()알 수 있지만 이해할 수 없으며이 오류가 표시됩니다. 구성 요소가 잘 렌더링되지만 테스트 방법을 모르겠습니다.
Navbar component › Rendered navbar with many non tabs
TypeError: child.type is not a function
48 | if (React.Children.count(children) > 1) {
49 | value = children.map(child => {
> 50 | isTab = child.type().toLowerCase() !== 'tabs' ? false : isTab;
| ^
51 | return child.props;
52 | });
53 | }
navbar
const Navbar = ({ children, filter }) => {
let isTab = true;
let value = null;
if (React.Children.count(children) > 1) {
value = children.map(child => {
isTab = child.type().toLowerCase() !== 'tabs' ? false : isTab;
return child.props;
});
}
return (
<>
{value.map(child => child.component)}
</>
)
}
const Tabs = () => {
return 'tabs';
};
Navbar.Tab = Tabs;
export default Navbar;
navbar.test.js
test('Rendered navbar with filter', () => {
const wrapper = mount(
<Navbar filter>
<Navbar.Tab label="In Flight Orders" component={null} />,
<Navbar.Tab label="Active Service" component={null} />,
<Navbar.Tab label="Active Service 1" component={null} />
</Navbar>
);
expect(wrapper).toMatchSnapshot();
});
child.type().toLowerCase() !== 'tabs'이 검사를 수행하는 나쁜 방법입니다. 모든 자식 요소가 React 구성 요소는 아니며 모든 클래스 또는 기능적 React 구성 요소가 함수처럼 호출 될 수있는 것은 아닙니다. 그건 안전하지 않은 해킹 을 제외한 거의 모든 아이를 위해 오류가 발생합니다 Tab. 대신 type비교해야합니다 Tab.
이 경우 구성 요소도 실패합니다 value === null.
더 안전하고 간단하게 작성하는 방법은 다음과 같습니다.
const Navbar = ({ children, filter }) => {
const tabs = React.Children.toArray(children)
.filter(child => child.type === Navbar.Tab)
.map(child => child.props.component)
.filter(Boolean);
return (
<>
{tabs}
</>
)
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다