reactjs - Hur man enhetstestar en forwardRef-inkapslad komponent med react-testing-library?

Komponenten som är omsluten med forwardRef verkar inte ställa in ref eftersom följande test misslyckas med detta fel:

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

Det fungerar i webbläsaren, bara testet misslyckas.

Komponenten:

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'

Det misslyckade testet:

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()
  })
})

Relaterade artiklar