react-test-renderer's createNodeMock does not work as expected

[khirakawa]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
  OS: macOS Sierra 10.12.6
  Node: 8.6.0
  Yarn: 1.1.0
  npm: 5.3.0
  Watchman: 4.7.0
  Xcode: Xcode 9.2 Build version 9C40b
  Android Studio: Not Found

Packages: (wanted => installed)
  react: 16.2.0 => 16.2.0
  react-native: ^0.53.0 => 0.53.0

Steps to Reproduce

1. react-native init NodeMockTest

2. cd NodeMockTest

3. Open __tests__/App.js and replace with this code:

   import 'react-native';
   import React, { Component } from 'react';
   import { View } from 'react-native';
   
   // Note: test renderer must be required after react-native.
   import renderer from 'react-test-renderer';
   
   class Test extends Component {
     componentDidMount() {
       this._root.test();
     }
   
     render() {
       return (
         <View ref={component => (this._root = component)} />
       );
     }
   }
   
   it('renders correctly', () => {
     const tree = renderer.create(
       <Test />,
       {
         createNodeMock: element => {
           return {
             test: () => { console.log('it works'); }
           };
         }
       }
     );
   });

4. Run npm test

Expected Behavior

I expect the test to not throw an error

Actual Behavior

Test fails with:

TypeError: this._root.test is not a function

Screenshot:

Reproducible Demo

Please see steps above for code.

I was not able to reproduce this issue with Expo. Please see https://snack.expo.io/SkpvqjfwM.

[hramos]

I'm not very familiar with this - is it supposed to work? Do you have a reference if so?

[khirakawa]

@hramos I learned about createNodeMock here https://reactjs.org/blog/2016/11/16/react-v15.4.0.html#mocking-refs-for-snapshot-testing

[daviddelusenet]

This worked for me:

test('Compare snapshots', () => {
  const component = renderer.create(<ErrorMessage {...errorMessageData} />, {
    createNodeMock: () => ({}),
  });

  const tree = component.toJSON();
  expect(tree).toMatchSnapshot();
});

ErrorMessage component:

import React from 'react';
import PropTypes from 'prop-types';
import { TweenLite } from 'gsap';

// Styled Components
import { Message, Wrapper } from './ErrorMessage.sc';

export default class ErrorMessage extends React.PureComponent {
  static propTypes = {
    message: PropTypes.string.isRequired,
    showTemporary: PropTypes.bool,
  };

  static defaultProps = {
    showTemporary: true,
  };

  constructor(props) {
    super(props);

    // Setup refs
    this.wrapper = React.createRef();
  }

  componentDidMount() {
    TweenLite.fromTo(this.wrapper.current, 0.7, {
      y: '-101%',
    }, {
      y: '0%',
      ease: Quad.easeOut,
    });

    if (this.props.showTemporary) {
      TweenLite.to(this.wrapper.current, 0.7, {
        y: '-101%',
        ease: Quad.easeIn,
        delay: 10.7,
      });
    }
  }

  componentWillUnmount() {
    TweenLite.killTweensOf(this.wrapper.current);
  }

  render() {
    const { message } = this.props;

    return(
      <Wrapper innerRef={this.wrapper}>
        <Message>{message}</Message>
      </Wrapper>
    );
  }
}

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.