Enzyme: Unmount and then wrapper.mount() again does not work properly

Created on 13 May 2017 · 6Comments · Source: enzymejs/enzyme

Enzyme: 2.8.2
React: 15.5.4

If we do wrapper.unmount(), and then wrapper.mount(), the component is not mounted properly. I can see an empty console output after mounting again.

Simple plain example as follows

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

  }
  render() {
    return (
      <div className={this.props.id}>
        {this.props.id}
      </div>
    );
  }
}

const wrapper = mount(<Foo id="foo" />);

console.log("log before unmounting", wrapper.mount().debug()); //This logs the component properly

wrapper.unmount();

console.log("Log again after mounting", wrapper.mount().debug());//this logs empty component

mount bug help wanted question

Source

innoist

👍3

All 6 comments

Hey guys,

According to the docs this should work. However the following test fails:

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

describe('Foo test', () => {

    const Client = {
        callCount: 0,
        incrementCallCount: () => {
            Client.callCount++;
        }
    };

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

        }

        componentWillMount() {
            Client.incrementCallCount();
        }

        render() {
            return (
                <div className={this.props.id}>
                    {this.props.id}
                </div>
            );
        }
    }

    it('should increment call count when mounted', () => {
        let wrapper = mount(<Foo />);
        expect(Client.callCount).toBe(1);

        wrapper.mount();
        expect(Client.callCount).toBe(2);
    });

});

Are we doing something wrong?

Cheers!

lcardito on 24 May 2017

👍1

Hello guys,
Any update on this?

innoist on 12 Jun 2017

This may be fixed by #969

ljharb on 12 Jun 2017

🎉1

Still not fixed

component.unmount();
component.mount();
component.update();
console.log(component.debug());

Shows empty console log

WhoAteDaCake on 9 Oct 2017

This still doesn't work and throws infinite meaningless errors.

I'm on:

"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"enzyme-to-json": "3.3.4",
"react": "16.4.1",

SelaO on 31 Oct 2018

so you need just add some configuration
I've created two files, first it's with dom

const jsdom = require('jsdom');
const { JSDOM } = jsdom;

function setUpDomEnvironment() {
  const dom = new JSDOM('<!doctype html><html><body></body></html>');
  const { window } = dom;

  global.window = window;
  global.document = window.document;
  global.navigator = {
      userAgent: 'node.js',
  };
  copyProps(window, global);
}

function copyProps(src, target) {
  const props = Object.getOwnPropertyNames(src)
      .filter(prop => typeof target[prop] === 'undefined')
      .map(prop => Object.getOwnPropertyDescriptor(src, prop));
  Object.defineProperties(target, props);
}

setUpDomEnvironment();

and second with configuration enzyme

import  expect  from 'expect';
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

import { mount, render, shallow } from 'enzyme';

global.expect = expect;

global.mount = mount;
global.render = render;
global.shallow = shallow;

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

after that you can test your component

import React from 'react'
import {Foo} from './Foo'

describe('Foo', function () {
  const props = {
    test: { id:'',title:'test'}   
  }

 const wrapper = mount(<Foo {...props}/>);
  it('should render button',() => {
     const button = wrapper.find('input').last()
     expect(button .prop('type')).toBe('submit')
     saveButton.simulate('click')
  })
})