Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Refs are null in Jest snapshot tests with react-test-renderer

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

like image 645
user3718704 Avatar asked Nov 28 '16 19:11

user3718704


People also ask

Is snapshot testing is supported in Jest?

Snapshot Testing with Jest​ `; The snapshot artifact should be committed alongside code changes, and reviewed as part of your code review process. Jest uses pretty-format to make snapshots human-readable during code review.

How do I view Jest snapshots?

To review your snapshots, run npm run jest-html ( yarn run jest-html ). This launches your default browser and opens the jest-html application. By default, jest-html looks for snapshots under **/*. snap,!

How do I update a snapshot in Jest?

You should then update the snapshot tests. Note: Alternatively, if you have Jest installed globally, you can run jest --updateSnapshot or jest -u . This will update the snapshots to match the updates you made, and your tests will pass.

Should you use Jest snapshots?

Using Jest snapshots will help you ensure that your UI changes are deterministic and that you are aware when changes are made. Using that information, you can determine whether the changes were intended or not. You will be using the snapshots you create with Jest to simulate changes in a React application.

How do you update a snapshot test in React?

You will likely see the interactive mode. Press u to update the failing tests. However, you can also install the Jest CLI globally with npm install jest -g . This allows you to use the jest --updateSnapshot command from the terminal to update all snapshots.


2 Answers

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.

like image 138
Dan Abramov Avatar answered Sep 19 '22 11:09

Dan Abramov


I used Enzyme-based test from this repo to solve this issue like that:

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

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

    const wrapper = shallow(<SomeComponent />);

    expect(toJson(wrapper)).toMatchSnapshot();
  });
});
like image 34
Muho Avatar answered Sep 16 '22 11:09

Muho