Question

所以我正在测试这个简单的功能：

toggleMenuVisibility = () => {
        document.getElementsByClassName('menu')[0].classList.toggle('hidden');
    }

当我模拟“点击”事件时，出现无法读取未定义的属性'classList'错误

现在我的测试如下：

it('toggleMenuVisibility() adds "hidden" to menu classList', () => {
        configure({ adapter: new Adapter() });

        const component = shallow(
            <Menu />
        )

        let mockClick = () => component.find('#menu-btn').simulate('click')

        expect(mockClick).toThrow(TypeError)

        try {
            mockClick()
        } catch (e) {
            expect(e.message).toBe("Cannot read property 'classList' of undefined");
        }
    })

但是我非常想以正确的方式对其进行测试。顺便说一下，它是React。是什么原因引起的？浅渲染？不嘲笑global.document吗？

编辑

这是html：

<header>
  <div className="menu hidden">
    <nav>
      <NavLink exact to={`/`} className="menu-item">
        <button className='menu-item'>
          <div className='menu-item-div'>Nowe zamówienie</div>
        </button>
      </NavLink>
      <NavLink to={`/summary`} className="menu-item">
        <button className='menu-item'>
          <div className='menu-item-div'>Podsumowanie</div>
        </button>
      </NavLink>
    </nav>
  </div>
  <img id='menu-btn' alt='menu button' onClick={this.toggleMenuVisibility} src={img} />
</header>

开玩笑，酶测试对simulate（'click'）引发错误[无法读取未定义的属性...]

0 个答案: