enzymejs / enzymejs/enzyme

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

Open
#2,196 18 comments 10 reactions 0 assignees View on GitHub
API: shallow bug help wanted
Dominant language
JavaScript
Stars
19.8k
Forks
2k
PR merge metrics
No merged PRs in 30d

Description

### Current behavior
Hi all! I try to test my functional component, wrapped by memo.
#### TestButton.tsx
```import React, { memo, useState } from 'react'

function TestButton () {
const [open, setOpen] = useState(false)
const toggle = () => setOpen(!open)
return (

test

)
}

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()
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

- [x] 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

- [x] 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 ( )

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.