在内部组件中使用Jest测试onClick函数

时间:2019-11-13 10:37:58

标签: javascript reactjs testing jestjs

我有一个用于导航栏的父组件,并且想测试一个导入的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();
  });
});

任何帮助,谢谢:)

0 个答案:

没有答案