最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Test the changed state after useEffect has runned - Stack Overflow

programmeradmin6浏览0评论

I use ReactJs, jest and react testing library. I have this code:

const App = ({data}) => {
  const [state, setState] = useState(); // after useEffect runs state should be false
  console.log('test state', state)
  useEffect(() => {
     setState(!data) 
  }, [])
  return <p>'data is' {data},<p/>
}

<App data={12}  />

I use ReactJs, jest and react testing library. I have this code:

const App = ({data}) => {
  const [state, setState] = useState(); // after useEffect runs state should be false
  console.log('test state', state)
  useEffect(() => {
     setState(!data) 
  }, [])
  return <p>'data is' {data},<p/>
}

<App data={12}  />

After the useEffect will run the state should be false. Now i want to test the ponent using jest and react testing library.

describe('App', () => {

  beforeEach(() => {
    const setValue = jest.fn(x => {});
    React.useState = jest.fn()
      .mockImplementationOnce(x => [x, setValue])
  })
  test('It should render the correct value', async() => {
      const v = utils.queryByText(12)
      expect(v).toBeInTheDocument()
    })
  })
})

When i run the test in console.log('test state', state) i get for first time console.log('test state', undefined) and after that console.log('test state', false), but i need to get only the false value, because due the fact that for the first time the value is undefined the test fails. How to do this?

Share edited Nov 6, 2021 at 10:23 Zoe - Save the data dump 28.3k22 gold badges128 silver badges160 bronze badges asked Nov 3, 2021 at 6:46 AskingAsking 4,21221 gold badges82 silver badges163 bronze badges 2
  • Set initial value true const [state, setState] = useState(true); – Asif vora Commented Nov 3, 2021 at 7:07
  • @Asifvora, if i set that, on the first render i get true and on the second false, but i need to use only false, so to wait after useEffect will run. – Asking Commented Nov 3, 2021 at 7:12
Add a ment  | 

2 Answers 2

Reset to default 3

You need to wait until the ponent did mount and then run your expectation. In react testing library, there is a special method for it. waitFor.

from React testing library documentation:

When in need to wait for any period of time you can use waitFor, to wait for your expectations to pass.

import {waitFor} from '@testing-library/react'

describe('App', () => {
  // rest of the codes ...
  test('It should render the correct value', async() => {
      const v = utils.queryByText(12)

      await waitFor(() => {
         expect(v).toBeInTheDocument()
      })
    })
  })
})

You are getting two console logs because this line initialises your state (undefined):

const [state, setState] = useState();

After that the useEffect hook runs onComponentDidMount and changes the state, which causes the ponent to rerender (second log statement).

You could use something like this, if you want to init the state from the props:

const [state, setState] = useState(!data);

Update:

This works on my machine:

Maybe you have some typos?

发布评论

评论列表(0)

  1. 暂无评论