CODEWITHSUNDEEP
javascriptreactjs
Asking
Asking

Reputation: 4172

Test the changed state after useEffect has runned

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 component 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?

Upvotes: 6

Views: 9012

Answers (2)

Michael Haar
Michael Haar

Reputation: 711

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 component 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: source file

test file

result

Maybe you have some typos?

enter image description here

Upvotes: 1

nima
nima

Reputation: 8915

You need to wait until the component 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()
      })
    })
  })
})

Upvotes: 3

Related Questions