enzymejs/enzyme

Parent() not working properly

Open

#1991 opened on Jan 29, 2019

View on GitHub
 (8 comments) (1 reaction) (0 assignees)JavaScript (19,979 stars) (2,016 forks)batch import
API: mountNeed To Reproducebughelp wanted

Description

Current behavior

I have tried to create a couple of tests to a very simple React component.

Foo.js

import React, { PropTypes } from 'react';

const propTypes = {};

const defaultProps = {};

class Foo extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <div className="parent">
          <div className="child">Child</div>
        </div>
        <div className="parent">
          <div className="child newest">Child</div>
        </div>
      </div>
    );
  }
}

Foo.propTypes = propTypes;
Foo.defaultProps = defaultProps;

export default Foo;

Foo-test.js

import React from 'react';
import { configure, mount, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import Foo from '../src/Foo';

configure({adapter: new Adapter()});

describe("A suite", function() {
  it("contains spec with an expectation", function() {
    var Wrapper = mount(<Foo />);
    var bottomMost = Wrapper.findWhere(node => node.hasClass("newest"));
    var parents = Wrapper.findWhere(node => node.hasClass("parent"));
    parents.forEach(p => console.log(p.html()));
    //outputs:
    //  <div class="parent"><div class="child">Child</div></div>
    //  <div class="parent"><div class="child newest">Child</div></div>
    console.log(bottomMost.length);
    //outputs:
    //  1
    console.log(bottomMost.html());
    //outputs:
    //  <div class="child newest">Child</div>
    console.log(bottomMost.parent().length);
    //outputs:
    //  1
    console.log(bottomMost.parent().html());
    //outputs:
    //  null
    console.log(bottomMost.parent().text());
    //outputs:
    //  null
    console.log(bottomMost.parent().findWhere(c => c.text() == "Child").length)
    //outputs:
    //  0
  });
});

It seems that when I try to access the parent element of the child node, I loose a lot of information. Basically html() and text() will output null, and childrens are gone.

Expected behavior

I would expect that the Wrapper returned by invoking parent() would be a fully fledged ReactWrapper with all children below (as if I was accessing it via the Wrapper returned by mount).

Your environment

JSDOM

API

  • shallow
  • mount
  • render

Version

| enzyme 3.8.0 | react 16.7.0 | react-dom 16.7.0

Adapter

  • enzyme-adapter-react-16
  • enzyme-adapter-react-16.3
  • enzyme-adapter-react-16.2
  • enzyme-adapter-react-16.1
  • enzyme-adapter-react-15
  • enzyme-adapter-react-15.4
  • enzyme-adapter-react-14
  • enzyme-adapter-react-13
  • enzyme-adapter-react-helper
  • others ( )

Contributor guide