enzymejs/enzyme

shallow doesn't work correctly with useState + React.memo

Open

#2,196 创建于 2019年7月18日

在 GitHub 查看
 (18 评论) (10 反应) (0 负责人)JavaScript (19,979 star) (2,016 fork)batch import
API: shallowbughelp wanted

描述

Current behavior

Hi all! I try to test my functional component, wrapped by memo.

TestButton.tsx


function TestButton () {
  const [open, setOpen] = useState(false)
  const toggle = () => setOpen(!open)
  return (
    <button
      className={open && 'Active'}
      onClick={toggle}>
      test
    </button>
  )
}


export default memo(TestButton)

TestButton.test.tsx

import React from 'react'
import { shallow } from 'enzyme';
import TestButton from './TestButton';

describe('Test', () => {
  it('after click, button should has Active className ', () => {
    let component = shallow(<TestButton />)
    component.find("button").prop('onClick')()
    expect(component.find("button").hasClass('Active')).toBeTruthy()
  })
})

I expect, that test will pass, but it fails and i can not understand why. If I will remove memo wrapper it passed. Or if I wrap testing component with mount and after click make component.update() it will be passed too

Expected behavior

Test should be passed

Your environment

API

  • shallow
  • mount
  • render

Version

library version
enzyme 3.1.0
react 16.8.0
react-dom 16.8.0
react-test-renderer
adapter (below)

Adapter

  • enzyme-adapter-react-16
  • enzyme-adapter-react-16.3
  • enzyme-adapter-react-16.2
  • enzyme-adapter-react-16.1
  • enzyme-adapter-react-15
  • enzyme-adapter-react-15.4
  • enzyme-adapter-react-14
  • enzyme-adapter-react-13
  • enzyme-adapter-react-helper
  • others ( )

贡献者指南

shallow doesn't work correctly with useState + React.memo · enzymejs/enzyme#2196 | Good First Issue