在使用 react-test-renderer 的 Jest 快照测试中，Refs 为空 [英] Refs are null in Jest snapshot tests with react-test-renderer

问题描述

目前我正在 componentDidMount 上手动初始化 Quill 编辑器，而 jest 测试对我来说失败了.看起来我得到的 ref 值在 jsdom 中为空.这里有问题:https://github.com/facebook/react/issues/7371 但看起来 refs 应该可以工作.有什么我应该检查的想法吗?

组件:

import React, { Component } from 'react';从'./logo.svg'导入标志；导入'./App.css';类 App 扩展组件 {componentDidMount() {控制台日志(this._p)}使成为() {返回 (
<img src={logo} className=App-logo"alt=标志"/><h2>欢迎反应</h2>
<p className="App-intro";ref={(c) =>{ this._p = c }}>首先，编辑 src/App.js;并保存以重新加载.</p>
);}}

测试:

从'react'导入React；从 'react-dom' 导入 ReactDOM；从'./App'导入应用程序；从反应测试渲染器"导入渲染器it('快照测试', () => {const tree = renderer.create(<应用程序/>).toJSON()期望(树).toMatchSnapshot()})

因此，console.log 输出空值.但我希望 P 标签

解决方案

由于测试渲染器未与 React DOM 耦合，因此它不知道 refs 应该是什么样子.React 15.4.0 添加了为测试渲染器模拟 refs 的能力但你应该自己提供这些模拟.React 15.4.0 发行说明 包括一个这样做的例子.

从'react'导入React；从'./App'导入应用程序；从 'react-test-renderer' 导入渲染器；函数 createNodeMock(元素){if (element.type === 'p') {//这是 <p> 的假 DOM 节点.//随意添加任何存根方法，例如focus() 或任何//防止组件崩溃所需的其他方法.返回 {};}//对于任何类型的 DOM 组件，您都可以从此方法返回任何对象.//React 将在快照测试时将其用作 ref 而不是 DOM 节点.返回空；}it('正确渲染', () => {const 选项 = {createNodeMock};//不要忘记传递选项对象！const tree = renderer.create(<App/>, options);期望(树).toMatchSnapshot()；});

请注意，它仅适用于React 15.4.0 及更高版本.

Currently I am manually initializing Quill editor on componentDidMount and jest tests fail for me. Looks like ref value that I am getting is null in jsdom. There is and issue here: https://github.com/facebook/react/issues/7371 but looks like refs should work. Any ideas what I should check?

Component:

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

Test:

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

As a result, console.log outputs null. But I would expect P tag

解决方案

Since test renderer is not coupled to React DOM, it doesn't know anything about what refs are supposed to look like. React 15.4.0 adds the ability to mock refs for test renderer but you should provide those mocks yourself. React 15.4.0 release notes include an example of doing so.

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

Note that it only works with React 15.4.0 and higher.

这篇关于在使用 react-test-renderer 的 Jest 快照测试中，Refs 为空的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！