在玩笑中使用模拟将 @gorhom/portal 中的门户设置为视图

Question

我想使用

<Portal />

中的组件

@gorhom/portal

作为视图进行模拟。

我想这样做，因为

<Portal />

组件需要应用程序根目录下的

<PortalProvider />

。但我想测试一下单屏。

这是我所做的模拟：

import { jest } from '@jest/globals'

jest.mock('@gorhom/portal', () => {
  const react = require('react-native')

  return {
    __esModule: true,
    Portal: () => react.View,
    usePortal: jest.fn(),
  }
})

这是我正在运行的测试

import React from 'react'

import renderer from 'react-test-renderer'

import ViewWithPortal from 'screens/ViewWithPortal'

test('renders correctly', () => {
  expect(true).toBeTruthy()

  const tree = renderer.create(<ViewWithPortal />).toJSON()
  expect(tree).toMatchSnapshot()
})

但是当我调用测试屏幕时，这是我遇到的错误：

'PortalDispatchContext' cannot be null, please add 'PortalProvider' to the root component.

       7 |
       8 | test('renders correctly', () => {
    >  9 |   const tree = renderer.create(<CreateAccount />).toJSON()
         |                         ^
      10 |   expect(tree).toMatchSnapshot()
      11 | })
      12 |

导致问题的组件是这个：

const ViewWithPortal = () => {

  ...

  return (
    <Portal>
      <BottomSheet>
        {...}
      </BottomSheet>
    </Portal>
  )
}

如果您有什么建议！

Answer 1

问题似乎出在笑话上，它没有获取模拟文件的路径。请检查此路径是否已添加到模拟路径或者您是否在正确的目录中运行测试。