Question

你好，我是刚测试Hooks的人，所以我真的迷路了，试图找到答案，但没有结果。

问题是，如何从此代码测试useEffect？

代码：

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])

我想从代码中测试的是LoadingIndicator，检查道具isLoading，如果是true或false。

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

测试：

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

错误：

不变违规：元素类型无效：预期使用字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义

有什么建议吗？

Answer 1

要检查传递给组件的值，可以使用酶prop方法。就您而言：

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

测试useEffect（），挂钩

1 个答案: