Search
showing results for - "react enzyme async using hooks"
Leonardo
28 Mar 2017
1//app.js
2import React from 'react'
3import FetchData from './FetchData'
4
5const fetchUsers = () =>
6fetch('https://jsonplaceholder.typicode.com/users').then((res) => res.json())
7
8function App() {
9  return (
10    <>
11      <FetchData fetchUsers={fetchUsers} />
12    </>
13  )
14}
15
16export default App
17
18//fetchdata.js
19import React, { useState } from 'react'
20
21function fetchData({ fetchUsers }) {
22  const [state, setState] = useState([])
23
24  React.useEffect(() => {
25    fetchUsers().then(setState)
26  }, [])
27
28  return (
29    <>
30      {state &&
31        state.map((val, id) => (
32          <ul key={id}>
33            <li>{val.name}</li>
34          </ul>
35        ))}
36    </>
37  )
38}
39
40export default fetchData
41
42// fetchdata.test.js
43import React from 'react'
44import { shallow } from 'enzyme'
45import FetchData from '../FetchData'
46
47describe('Fetch All Data Hooks', () => {
48  let props
49  let wrapper
50  let useEffect
51
52  const users = [
53    { id: 1, name: 'jamal' },
54    { id: 2, name: 'karyo' },
55    { id: 3, name: 'mirdad' }
56  ]
57
58  beforeEach(() => {
59    useEffect = jest.spyOn(React, 'useEffect').mockImplementationOnce((f) => f())
60    props = { fetchUsers: jest.fn().mockResolvedValue(users) }
61    wrapper = shallow(<FetchData {...props} />)
62  })
63
64  afterAll(() => {
65    jest.clearAllMocks()
66  })
67
68  it('result all users', () => {
69    expect(useEffect).toHaveBeenCalled()
70    expect(props.fetchUsers).toHaveBeenCalled()
71    expect(props.fetchUsers).toHaveBeenCalledTimes(1)
72    expect(jest.isMockFunction(props.fetchUsers)).toBeTruthy()
73  })
74
75  it('find render all users exits count', () => {
76    expect(wrapper.find('ul > li')).toHaveLength(3)
77    expect(
78      wrapper.containsAllMatchingElements([
79        <ul>
80          <li>jamal</li>
81        </ul>,
82        <ul>
83          <li>karyo</li>
84        </ul>,
85        <ul>
86          <li>mirdad</li>
87        </ul>
88      ])
89    ).toBeTruthy()
90  })
91})
similar questions
react useeffect asyncasync await class component reactawait in react in function componentmock api inside react component jest asyncjest always pass async awaitreact enzyme simulate clickasync in useeffectreact hooks call child fuynctionhow to test useeffect with enzymemobx react hooks asyncuseeffect async awaitreact usestate set is asyncreact ezyme simulate clickasync useeffectasync useeffecttesting library react hooksasync wait for axios reactjstesting a function in jest on click react
queries leading to this page
test state react hooksreact fetch api post callhow to unit test react hooks 2021 jest enzymefetch functions react hookshow to test mounted component after hook has runreact hook testingtest jest enzyme hookshow to make unit test for react hooks with enzymefetch api using react hookshow to use react hooks in test file with jest and enzymeenzyme fetch url hooksenzyme testing hooks with fetch callstesting custom hooks that contain useeffecthow to jest enzyme test cases for hookshow to fetch api data using react hooks in react jsreact hooks testing library mock api callstesting react hooks with jest and enzymefetch api hooksenzyme testing hooksenzyme react testing usesfetch api data in react hook with awaithooks testingtest custom hook enzymereactjs hooks jest enzyme use fetch hook reactjest with react hooksdo enzyme support testing react hooksunit testing react hooks enzyme jesrhow to test react hooks with jest enzyme react fetch hooktesting react hookstesting react hooks with enzymehow to test useeffect hooktest a custom hook enzymehow to fetch data from api in react hooksfetch data from api using react hookapi fetch calls reacthooks in react js jest enzyme testingreact eznyme fetch api using hookstest custom hook react enzymeuseeffect with fetchreact hooks test apijest enzyme test hooksfetch api react hooksreact test fatch api mediumhow to fetch data from an api with react hooksreact enzyme async fetch api using hooksreact hooks fetch datahow to i do fetch get request using react hookshow to test useeffect enzyme jestfetch api data using react hooks in react jsreact enzyme async using hooks