如何使用 Jest 和 Enzyme 测试使用中的 Memo 钩子中的功能?

How to test function in useMemo hook with Jest and Enzyme?

提问人:Vight 提问时间:9/11/2021 更新时间:9/11/2021 访问量:3864

问:

我有一个使用 useMemo 钩子的 react 组件。组件如下所示:

    export const ContactListContainer = () => {
    ...
    const [query, setQuery] = useState('')

    const filterContactByQuery = (contact, query) => {
        const searchFieldValues = `${contact[FIRST_NAME]},${contact[MIDDLE_NAME]},${contact[LAST_NAME]}`.toLowerCase()
        return searchFieldValues.includes(query.toLowerCase())
    }

    const searchMemo = useMemo(
        () => functionUtils.defaultMemoize(query => contacts.filter(contact => filterContactByQuery(contact, query))),
        [contacts],
    )

    const filteredContacts = searchMemo(query)

    
    return (
        <ContactList
            onSetQuery={setQuery}
        />
    )

我的任务是测试记忆:我需要测试在相同的搜索查询输入的情况下不会调用函数“filterContactByQuery”。 我觉得我需要嘲笑或监视该功能,但我无法弄清楚该怎么做,因为它是组件中的内部功能(我的意思是它没有导出或类似的东西)。

我有单元测试的草稿(虽然不起作用):

imports of ContactList and ContactListContainer
test('should memoize filterByContacts()', () => {
        const setup = () => mount(<ContactListContainer />)
        //            const mockFilterContactByQuery = jest.fn()
        //            jest.mock('react', () => ({
        //                useMemo: () => mockFilterContactByQuery,
        //            }))
        const component = setup()
        component.find(ContactList).invoke('onSetQuery')('John')
        expect('filterContactByQuery').toHaveBeenCalled()
        component.find(ContactList).invoke('onSetQuery')('')
        expect('filterContactByQuery').not.toHaveBeenCalled()
    })
reactjs 单元测试 jestjs

评论

0赞 Lin Du 9/13/2021
它从何而来,它有什么作用?functionUtils.defaultMemoize
0赞 Vight 9/13/2021
它是项目基础记忆包装器功能。它重新运行函数并检查传递给它的最后一个参数是否相同,它只是返回最后一个参数的结果,而不进行任何计算。
0赞 program_bumble_bee 10/19/2021
您@Vight能够找到相同的解决方案?
0赞 Michael Boñon 7/11/2022
这里有更新吗?@Vight

答: 暂无答案