mercredi 13 novembre 2019

Test onClick function using Jest within internal component

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