React ref.current является пустым в componentDidMount только в тесте на фермент, НЕ является нулевым в реальном времени

Question

Я довольно новичок в тестировании компонентов React и пытаюсь протестировать ссылку, созданную с помощью React.createRef.Я прочитал этот замечательный ответ и не уверен, что он решает мою проблему. componentDidMount вызывается перед обратным вызовом ref

constructor(props) {
    super(props);
    this.myRef = React.createRef();
    console.log('this.myRef in constructor', this.myRef);
}

Этот журнал консоли возвращает значение NULL и ожидается, поскольку компонент еще не обработан.

componentDidMount() {
    console.log('this.myRef in component did mount', this.myRef);
  }

    return (
      <div className="tab_bar">
        <ul ref={this.myRef} className="tab__list direction--row" role="tablist">
          { childrenWithProps }
        </ul>
      </div>

Консольlog возвращает элемент ul html в componentDidMount.Это также ожидается, потому что компонент рендерился.

HOWEVER,

Когда я тестирую этот компонент:

const children = <div> child </div>;

describe('Tab component', () => {
  it('should render', () => {
    const wrapper = mount(<Tab>{children}</Tab>);
    const ulElement = wrapper.find('ul');
    const instance = ulElement.instance().ref;
    console.log('instance', instance);

    expect(wrapper).toMatchSnapshot();
  });
});

Мои операторы журнала консоли в моем терминале (это.myRef в моем конструкторе и в componentDidMount) оба говорят, что {current: null} и instance не определены.

Может кто-нибудь, пожалуйста, помогите мне понять, что происходит?Спасибо!

Answer 1

Это поддерживается только в React 16.3 или новее.И должен быть установлен адаптер 16.3!Проверьте this для примера реализации теста, который скопирован ниже.

  class Foo extends React.Component {
    constructor(props) {
      super(props);
      this.setRef = createRef();
    }
     render() {
      return (
        <div>
          <div ref={this.setRef} className="foo" />
        </div>
      );
    }
  }

  const wrapper = mount(<Foo />);
  const element = wrapper.find('.foo').instance();
  expect(wrapper.instance().setRef).to.have.property('current', element);

Глядя на ваш код, вероятно, должно работать следующее исправление.Вы должны использовать имя вашей ссылки 'myRef' при доступе к ней из экземпляра.

describe('Tab component', () => {
  it('should render', () => {
    const wrapper = mount(<Tab>{children}</Tab>);
    const ulElement = wrapper.find('ul');
    const instance = ulElement.instance().myRef; //changed ref to myRef
    console.log('instance', instance);

    expect(wrapper).toMatchSnapshot();
  });
});