enzymejs / enzymejs/enzyme

useEffect cannot be invoked(tried setProps())

Open
#2,402 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.