如何使用react-testing-library对forwardRef包装的组件进行单元测试？

Question

forwardRef-wrapped 组件似乎没有设置 ref，因为以下测试失败并出现此错误：

    Error: Uncaught [TypeError: Cannot read properties of null (reading 'focus')]

它在浏览器中工作，只是测试失败。

组件：

export const SelectFormItem = forwardRef(
  <VT extends SelectValue = SelectValue>(
    { name, label, rules }: Props<VT>,
    ref: React.Ref<RefSelectProps>
  ) => {

    return (
      <Form.Item name={name} label={label} rules={rules}>
          <Select ref={ref} />
      </Form.Item>
    )
  }
)
SelectFormItem.displayName = 'SelectFormItem'

失败的测试：

describe('BEHAVIOR', () => {
  test('ref.current.focus() sets focus on component', () => {
    const Wrapper = () => {
      const ref = useRef<RefSelectProps>(null)
      return (
        <Form initialValues={{ value: 'Value 1' }}>
          <SelectFormItem mode='multiple' name={'value'} label={'TheValue'} options={Options} readOnly={true} ref={ref}/>
          <Button onClick={() => ref.current.focus()}>Focus</Button>
        </Form>
      )
    }

    render(<Wrapper />)
    screen.getByText('Focus').click()
  })
})