web-dev-qa-db-ja.com

react-test-rendererを使用したJestスナップショットテストの参照はnullです

現在、componentDidMountでクイルエディターを手動で初期化していますが、jestテストが失敗します。私が取得している参照値はjsdomではnullのようです。ここに問題があります： https://github.com/facebook/react/issues/7371 ですが、参照が機能するはずです。チェックすべきアイデアはありますか？

成分：

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はnullを出力します。しかし、私はPタグを期待します

javascriptreactjsjestjs
16
user3718704

テストレンダラーはReact DOMに結合されていないため、refがどのように見えるかについては何も知りません。React 15.4.0は、機能を追加しますテストレンダラーの参照をモックするが、それらのモックを自分で提供する必要があります。 React 15.4.0リリースノート 実行例を含めるそう。

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

これはReact 15.4.0以上でのみ機能することに注意してください。

37
Dan Abramov

私はこれから酵素ベースのテストを使用しました repo この問題をそのように解決するために：

import { shallow } from 'enzyme'
import toJson from 'enzyme-to-json'

describe('< SomeComponent />', () => {
  it('renders', () => {

    const wrapper = shallow(<SomeComponent />);

    expect(toJson(wrapper)).toMatchSnapshot();
  });
});
0
Mohammad altenji