I have a parent component for a navigation bar and would like to test an imported Toggle component that acts as a button with an onClick prop.
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;
Segment I would like to test
<Toggle active={navOpen} onClick={() => setNav(!navOpen)} />
I have seen much documentation on testing the onClick functionality on the parent component but not on a child component.
current tests im running are -
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();
});
});
Any help would be appreciate thanks :)
Aucun commentaire:
Enregistrer un commentaire