我有一个用于导航栏的父组件,并且想测试一个导入的Toggle组件,该组件用作一个带有onClick道具的按钮。
const Header = ({ brandLogo, links }: HeaderProps) => {
const [navOpen, setNav] = useState(false);
return (
<Container>
<div className='toggle-container'>
<Toggle active={navOpen} onClick={() => setNav(!navOpen)} />
</div>
<div className={navOpen ? 'menu open' : 'menu closed'}>
{links ? (
<ul>
{links.map(link => (
<li key={uuid.v4()} className='page-links'>
<a href={link.href}>{link.textKey}</a>
</li>
))}
</ul>
) : null}
<div className='menu-buttons'>
<Button text='Log In' />
<Button text='Register' />
</div>
</div>
{brandLogo ? (
<a className='brand-logo' href={brandLogo.href}>
{brandLogo.image}
</a>
) : null}
{links ? (
<ul className='links-container'>
{links.map(link => (
<li key={uuid.v4()} className='page-links'>
<a href={link.href}>{link.textKey}</a>
</li>
))}
</ul>
) : null}
<div className='button-container'>
<Button text='Log In' />
<Button text='Register' />
</div>
</Container>
);
};
export default Header;
我要测试的细分
<Toggle active={navOpen} onClick={() => setNav(!navOpen)} />
我已经看到很多关于在父组件而不是子组件上测试onClick功能的文档。
正在运行的当前测试-
describe('Footer Component', () => {
it('Component should render with all config set', () => {
const { asFragment } = render(<Header {...config} />);
expect(asFragment()).toMatchSnapshot();
});
it('Component should only render links if they are present', () => {
const { asFragment } = render(<Header {...onlyLinks} />);
expect(asFragment()).toMatchSnapshot();
});
it('Component should only render links if they are present', () => {
const { asFragment } = render(<Header {...onlyBrandLogo} />);
expect(asFragment()).toMatchSnapshot();
});
});
任何帮助,谢谢:)