Jest.js 如何模拟react-native-webview重载函数？

c3frrgcw 于 2022-12-08 发布在 Jest

关注(0)|答案(1)|浏览(192)

I'm trying to create a unit test for a component in which I have a WebView.
The problem is that inside this component I call the reload() function of the WebView.
And when I run the test I get this error:

Invariant Violation: nodeHandle expected to be non-null

      107 |     useCallback(() => {
      108 |       if (navigation.getState().index === 0) {
    > 109 |         webviewRef.current.reload();
          |                            ^
      110 |       }
      111 |     }, [webviewRef, navigation])
      112 |   );

I tried to mockup the reload() function following an example that I've found on Jest site in this way:

jest.mock('react-native-webview', () => {
  const RealComponent = jest.requireActual('react-native-webview');
  RealComponent.reload = jest.fn();
  return RealComponent;
});

But I'm getting the exact same error message. It seems that jest isn't picking my mockup.
How can I mockup the reload() function of WebView?

jestjs

来源：https://stackoverflow.com/questions/71384095/how-can-i-mock-react-native-webview-reload-function

1条答案

按热度按时间

enxuqcxy1#

您可以尝试创建一个react-native-webview的节点模块模拟。
假设组件TestComponent.tsx：

import React, { useEffect, useRef } from 'react'
import { WebView } from 'react-native-webview'

export const TestComponent = () => {
  const webViewRef = useRef<WebView>(null)

  useEffect(() => {
    webViewRef.current?.reload()
  }, [])

  return <WebView ref={webViewRef} source={{ uri: `https://stackoverflow.com` }} />
}

在__mocks__/react-native-webview.tsx中，我们可以得到：

import React, { forwardRef, useImperativeHandle } from 'react'
import { View } from 'react-native'

export const refFunctions = {
  reload: jest.fn(),
}

export const WebView = forwardRef((_props, ref) => {
  useImperativeHandle(ref, () => refFunctions)
  return <View />
})

此组件的测试如下所示：

import React from 'react'
import { render } from '@testing-library/react-native'
import { refFunctions } from '__mocks__/react-native-webview'
import { TestComponent } from './TestComponent'

describe('TestComponent', () => {
  afterEach(jest.clearAllMocks)
  it('reloads webview when component mounts', () => {
    render(<TestComponent />)
    expect(refFunctions.reload).toHaveBeenCalledTimes(1)
  })
})

赞(0）回复(0）举报 2022-12-08

我来回答

Jest.js 如何模拟react-native-webview重载函数？

1条答案

相关问题

热门标签

最新问答