首页 > 解决方案 > 我无法触发点击测试使用玩笑,酶

问题描述

我不知道是什么问题,因为我还是单元测试的新手我想测试 history.push 的功能但是我如何在 onClick 上获取事件?

这是我的代码

header.js

import React from 'react'
import { useLocation as location, useHistory } from 'react-router-dom'

import {
  Sticky,
  Container,
  Content,
  Navbar,
  Divmenu,
  Logo,
  Menutext,
} from './styling'

const Header = () => {
  const history = useHistory();
  const [active, setActive] = React.useState(false);

  const handleHome = React.useCallback(() => {
    history.push('/')
    if (active === true) {
      setActive(prevState => !prevState)
    }
  }, [history, active])
  return (
    <Sticky>
      <Container>
        <Content>
          <Navbar>
            <Logo src='./assets/images/logo.svg' onClick={handleHome} />
          </Navbar>
          <Divmenu>
            <Menutext data-test="nav-bar" color={(location.pathname === '/') ? 'primary' : 'black80'} onClick={handleHome}>Beranda</Menutext>
          </Divmenu>
        </Content>
      </Container>
    </Sticky>
  )
}

export default Header

header.test.js

/**
 * @jest-environment jsdom
 */
import React from 'react';
import renderer from 'react-test-renderer';
import { createMemoryHistory } from 'history';
import Enzyme from 'enzyme';
import Header from './header';

test('triggers path change', () => {
  const history = createMemoryHistory();
  const location = { pathname: '/' };

  const result = Enzyme.shallow(<Header history={history} location={ location }/>);

  console.log(result)
  // expect(history.location.pathname).toBe('/');
});

console.log 的结果是 object {}

谢谢您的帮助

标签: reactjsreact-reduxjestjsenzymereact-router-dom

解决方案


推荐阅读