Рефлексы являются нулевыми в моментальных снимках Jest с помощью обработчика реакции-ответа

Question

В настоящее время я вручную инициализирую редактор Quill для тестов componentDidMount и jest для меня. Похоже, что значение ref, которое я получаю, равно null в jsdom. Существует и проблема здесь: https://github.com/facebook/react/issues/7371, но выглядит как refs должен работать. Любые идеи, что я должен проверить?

Компонент:

import React, { Component } from 'react'; 
 
import logo from './logo.svg'; 
 
import './App.css'; 
 

 
class App extends Component { 
 

 
    componentDidMount() { 
 
    console.log(this._p) 
 
    } 
 
    
 
    render() { 
 
    return (
 
     <div className="App"> 
 
     <div className="App-header"> 
 
      <img src={logo} className="App-logo" alt="logo" /> 
 
      <h2>Welcome to React</h2> 
 
     </div> 
 
     <p className="App-intro" ref={(c) => { this._p = c }}> 
 
      To get started, edit <code>src/App.js</code> and save to reload. 
 
     </p> 
 
     </div> 
 
    ); 
 
    } 
 
}

Тест:

import React from 'react'; 
 
import ReactDOM from 'react-dom'; 
 
import App from './App'; 
 
import renderer from 'react-test-renderer' 
 

 
it('snapshot testing',() => { 
 
    const tree = renderer.create(
 
     <App /> 
 
    ).toJSON() 
 
    expect(tree).toMatchSnapshot() 
 
})

В результате console.log выходы нуль. Но я бы ожидал, что P-тег

Answer 1

Поскольку тестовый рендерер не связан с React DOM, он ничего не знает о том, какие ссылки должны выглядеть. React 15.4.0 добавляет способность высмеивать refs для тестового рендерера , но вы должны предоставить эти издевки самостоятельно. Пример React 15.4.0 release notes.

import React from 'react'; 
import App from './App'; 
import renderer from 'react-test-renderer'; 

function createNodeMock(element) { 
    if (element.type === 'p') { 
    // This is your fake DOM node for <p>. 
    // Feel free to add any stub methods, e.g. focus() or any 
    // other methods necessary to prevent crashes in your components. 
    return {}; 
    } 
    // You can return any object from this method for any type of DOM component. 
    // React will use it as a ref instead of a DOM node when snapshot testing. 
    return null; 
} 

it('renders correctly',() => { 
    const options = {createNodeMock}; 
    // Don't forget to pass the options object! 
    const tree = renderer.create(<App />, options); 
    expect(tree).toMatchSnapshot(); 
}); 

Обратите внимание, что он работает только с Реагировать 15.4.0 и выше.