Testing useEffect(), Hooks

Question

Hello I'm new testing Hooks, so I'm really lost, tried to find the answer but no result.

So the question is, How can I test useEffect from this code?

Code:

const [ range, setRange ] = useState(DATE_OPTIONS.LAST_30_DAYS)
const [ isLoading, setIsLoading ] = useState(true)

const startLoading = () => setIsLoading(true)
const stopLoading = () => setIsLoading(false)

useEffect(() => {
    startLoading()
    fetchYearlyOptiDrive(range, objectId)
        .then(stopLoading)
        .catch(stopLoading)
}, [range, objectId])

And what I wanna test from the code is LoadingIndicator, check the props isLoading, if it's true or false.

<LoadingIndicator {...{ isLoading }} />

Test:

    test('should return the default value', () => {
        const wrapper = mount(<OptiDriveCard {...props} />)
        expect(wrapper.find('LoadingIndicator').props).toBeTruthy()
    })

Error:

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined

Any suggestion?

Answer 1

To check the value passed to a component, you can use the enzyme prop method. In your case:

expect(wrapper.find('LoadingIndicator').prop('isLoading')).toBe(true);