useEffect cannot be invoked(tried setProps())
- Dominant language
- JavaScript
- Stars
- 19.8k
- Forks
- 2k
- PR merge metrics
- No merged PRs in 30d
Description
### Current behavior
```tsx
// Component.tsx
import React, { useState, useEffect } from 'react';
import axios from 'axios';
const Page: React.FC = ({ }) => {
const [remoteData, setRemoteData] = useState('');
useEffect(() => {
(async () => {
const res = await axios.get(
' https://hacker-news.firebaseio.com/v0/item/8863.json?print=pretty'
);
setRemoteData(res.data.title);
})();
return (
<>
{remoteData ? remoteData : 'Loading'}
);
};
export default Page;
```tsx
// Component.test.tsx
describe('Common Component Test', () => {
it.only('should fetch remote data and render to DOM', async () => {
const wrapper = mount();
// I tried this method which was mentioned in other issue, in vain it doesn't woke, either.
// wrapper.update();
// await act(async () => {
// await Promise.resolve(wrapper);
// await new Promise((resolve) => setImmediate(resolve));
// wrapper.update();
// });
// wrapper.update();
const dataElement = wrapper.find('p.remote-data');
expect(dataElement.exists()).toBeTruthy();
expect(dataElement.text()).toBe('Loading');
// how can i get component rerender?
wrapper.setProps({ a: 'a' });
wrapper.update();
// still get "Loading"
expect(dataElement.text()).toBe(
'My YC app: Dropbox - Throw away your USB drive'
);
});
})
```
### Expected behavior
### Your environment
- Mac OS Catalina 10.15.5
#### API
- [ ] shallow
- [x] mount
- [ ] render
#### Version
| library | version
| ------------------- | -------
| enzyme | 3.11.0
| react | 16.13.1
| react-dom | 16.13.1
| react-test-renderer | x
| adapter (below) | x
#### 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
Research direction
Reproduce the example in Component.tsx and Component.test.tsx with React 16.13.1, enzyme 3.11.0, and the selected React 16 adapter. Start by checking mount, useEffect, setProps, and wrapper.find behavior; done means the reported rerender assertion has a documented or reproducible resolution.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react, typescript
- Domain
- frontend, testing
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 20/100