Enzyme doesn't render highest DOM node in render tree of SFC with memo() #2068

BiosBoy · 2019-03-25T10:18:28Z

Current behavior

Enzyme returns the DOM tree from render without the highest node in it (functional component). So, I faced this issue once move to React 16.8 and update the all required enzyme/jest dependencies.

The interesting thing - if we add some extra nodes on top of the render tree - it shows previously hidden top node without any problems...

Current .debug() info:

    <Body imageToShow={1} switchImage={[Function: switchImage]}>
       // -- here should be the <div className={styles.body}> node also...
      <button type="button" onClick={[Function]} className="button">
        <TransitionGroup className="animWrap" component="div" childFactory={[Function: childFactory]}>
          <div className="animWrap">
            <CSSTransition classNames="mainImage" timeout={500} onExited={[Function: bound bound handleExited]} in={true} appear={[undefined]} enter={[undefined]} exit={[undefined]}>
              <Transition timeout={500} onExited={[Function]} in={true} appear={false} enter={true} exit={true} onEnter={[Function]} onEntered={[Function]} onEntering={[Function]} onExit={[Function]} onExiting={[Function]} mountOnEnter={false} unmountOnExit={false}>
                <img className="bodyImg" src="../assets/1.png" alt="main_img" />
              </Transition>
            </CSSTransition>
          </div>
        </TransitionGroup>
      </button>
         // -- here should be the </div> node also...
    </Body>

Expected behavior

Should return full rendered tree including the highest node in it.

It must be:

    <Body imageToShow={1} switchImage={[Function: switchImage]}>
       <div className={body}>
          // .... logic above
       </div>
    </Body>

Your environment

Current Component in render:

import React, { memo, useCallback } from 'react';
import { TransitionGroup, CSSTransition } from 'react-transition-group';

import styles from '../styles/index.scss';
import buttonsStyles from '../styles/button.scss';
import body from '../styles/body.scss';

const FIRST_IMAGE_ID = 1;
const SECOND_IMAGE_ID = 2;

const Body = (props) => {
  const { imageToShow, switchImage } = props;

  const handlerClick = useCallback(
    () => {
      if (imageToShow === FIRST_IMAGE_ID) {
        return switchImage(SECOND_IMAGE_ID);
      }

      return switchImage(FIRST_IMAGE_ID);
    },
    [imageToShow, switchImage]
  );

  return (
    <div className={styles.body}>
      <button type='button' onClick={handlerClick} className={buttonsStyles.button}>
        <TransitionGroup className={body.animWrap}>
          <CSSTransition classNames='mainImage' timeout={500} key={imageToShow}>
            <img className={styles.bodyImg} src={`../assets/${imageToShow}.png`} alt='main_img' />
          </CSSTransition>
        </TransitionGroup>
      </button>
    </div>
  );
};

Body.displayName = 'Body';

export default memo(Body);

Current test environment:

import React from 'react';
import { mount } from 'enzyme';

import initialState from './mocks/body';

import Body from '../components/Body';

describe('<Body Component Test />', () => {
  it('should render basic Body Component with an image', () => {
    const Component = mount(<Body {...initialState} />);

    console.log(Component.debug());

    expect(Component).toMatchSnapshot();

    expect(Component.find('.body').length).toBe(1);
    expect(Component.find('.bodyImg').length).toBe(1);

    expect(Component).toMatchSnapshot();
  });
});

API

shallow
[ + ] mount
render

Version

library	version
enzyme	3.9.0
react	16.8
react-dom	16.8
react-test-renderer
adapter (below)

Adapter

The text was updated successfully, but these errors were encountered:

ljharb · 2019-03-26T02:43:15Z

I'm a bit confused. enzyme does not support nor endorse snapshot testing, but .debug() output should certainly work.

What happens if you remove the memo wrapper around Body?

BiosBoy · 2019-03-27T18:33:43Z

Thanks for reply, Jordan!

Ha, yeah! It's strange, but without memo() wrap it works as expected! Maybe enzyme after its last updates still doesn't know fully how to deal with new React features at all?

ljharb · 2019-03-27T18:40:15Z

Indeed, it's likely a bug with memo support. Thanks for confirming.

ljharb · 2019-05-11T04:32:36Z

Looks like I fixed this in d885c34 / #2103. I'll add your test case to close.

- [new] support `suspenseFallback` option; support `Suspense`/`Lazy` (#1975) - [fix] `shallow`: properly dive through `memo` components (#2103, #2068) - [fix] avoid a Context.Provider deprecation warning - [fix] shallow renderer for `memo` does not respect `defaultProps` (#2115) - [fix] Don’t show wrapped component displayName in lazy component (#1975) - [fix] `simulateEvent`: call the adapter’s implementation, not the raw one (#2100) - [deps] update `enzyme-adapter-utils` - [dev deps] update `eslint-plugin-react`, `eslint-plugin-import`

ljharb added the Need More Information label Mar 26, 2019

ljharb added bug help wanted API: mount and removed Need More Information labels Mar 27, 2019

BiosBoy changed the title ~~Enzyme doesn't render highest DOM node in render tree of SFC~~ Enzyme doesn't render highest DOM node in render tree of SFC with memo() Mar 27, 2019

ljharb closed this as completed in 067bea1 May 11, 2019

snyk-bot mentioned this issue Oct 3, 2019

[Snyk] Upgrade enzyme-adapter-react-16 from 1.3.1 to 1.14.0 bermudez/nkc-webapp#25

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Enzyme doesn't render highest DOM node in render tree of SFC with memo() #2068

Enzyme doesn't render highest DOM node in render tree of SFC with memo() #2068

BiosBoy commented Mar 25, 2019 •

edited

Loading

ljharb commented Mar 26, 2019

BiosBoy commented Mar 27, 2019 •

edited

Loading

ljharb commented Mar 27, 2019

ljharb commented May 11, 2019

Enzyme doesn't render highest DOM node in render tree of SFC with memo() #2068

Enzyme doesn't render highest DOM node in render tree of SFC with memo() #2068

Comments

BiosBoy commented Mar 25, 2019 • edited Loading

Current behavior

Expected behavior

Your environment

API

Version

Adapter

ljharb commented Mar 26, 2019

BiosBoy commented Mar 27, 2019 • edited Loading

ljharb commented Mar 27, 2019

ljharb commented May 11, 2019

BiosBoy commented Mar 25, 2019 •

edited

Loading

BiosBoy commented Mar 27, 2019 •

edited

Loading