从 HTML 元素获取 ref 值

Question

如何从测试库反应的 HTML 元素中获取 ref 属性？ 到目前为止我有这个：

  it('element container ref should be null if prop noSwipe is passed', () => {
    const onCloseMock = jest.fn()
    render(<Wrapper onClose={onCloseMock} noSwipe />)
    const container = screen.getByTestId('container')
    expect(container.ref).toBeNull() // Want to implement this line
  })

Answer 1

也许这样的事情就是你要找的：

import React, {createRef} from 'react';

import * as TestUtils from 'react-dom/test-utils';
import CheckboxWithLabel from '../CheckboxWithLabel';

it('CheckboxWithLabel changes the text after click', () => {
  const checkboxLabelRef = createRef();
  const checkboxInputRef = createRef();
  // Render a checkbox with label in the document
  TestUtils.renderIntoDocument(
    <CheckboxWithLabel
      labelRef={checkboxLabelRef}
      inputRef={checkboxInputRef}
      labelOn="On"
      labelOff="Off"
    />,
  );

  const labelNode = checkboxLabelRef.current;
  const inputNode = checkboxInputRef.current;

  // Verify that it's Off by default
  expect(labelNode.textContent).toEqual('Off');

  // Simulate a click and verify that it is now On
  TestUtils.Simulate.change(inputNode);
  expect(labelNode.textContent).toEqual('On');
});

它来自 jest 的 react 示例，你可以在这里阅读