samedi 30 juillet 2016

Test get crushed because of error " dangerouslyRenderMarkup " in react enzyme mocha testing

The full error text is Invariant Violation: dangerouslyRenderMarkup(...): Cannot render markup in a worker thread. Make sure window and document are available globally before requiring React when unit testing or use ReactDOMServer.renderToString for server rendering.

I have searched this issue but all solutions are connected with jsdom set up. My jsdom set up is here :

import jsdom from 'jsdom';
import jquery from 'jquery';
import TestUtils from 'react-addons-test-utils';
import ReactDOM from 'react-dom';
import chai, { expect } from 'chai';
import React from 'react';
import chaiJquery from 'chai-jquery';

// Set up testing environment to run like a browser in the command line
global.document = jsdom.jsdom('<!doctype html><html><body></body></html>');
global.window = global.document.defaultView;
global.navigator = global.window.navigator;
const $ = jquery(global.window);

// build 'renderComponent' helper that should render a given react class
function renderComponent(ComponentClass, props, state) {
   const componentInstance = TestUtils.renderIntoDocument(
      <ComponentClass {...props} />
   );

   return $(ReactDOM.findDOMNode(componentInstance)); // produces HTML
}

// Build helper for simulating events
$.fn.simulate = function(eventName, value) {
   if (value) {
      this.val(value);
   }
   TestUtils.Simulate[eventName](this[0]);
}

// Set up chai-jquery
chaiJquery(chai, chai.util, $);

export { renderComponent, expect };

p.s. i don't use renderComponent function. I use enzyme mount instead

here is example of my test code

'use strict';
import React from 'react';
import { shallow, mount } from 'enzyme';
import sinon from 'sinon';
import chai, { expect } from 'chai';
import Profile_Store from '../profile.store';
import Signup from '../components/signup.component';

describe('__Signup__', ()=> {
   let signup_stub, spySubmit, spyCloseHint, wrap, context, email, pssword, passwordConfirm, submit, form_hint, input__hint;

   beforeEach(() => {
      spySubmit = sinon.spy(Signup.prototype, 'handleSubmit');
      signup_stub = sinon.stub(Profile_Store.prototype, 'signup');
      spyCloseHint = sinon.spy(Profile_Store.prototype, 'clearErrorMessage');
      context = {
         profile: new Profile_Store()
      };
      wrap = mount(<Signup  />, {context});
      email = wrap.find('input[type="email"]');
      pssword = wrap.find('input[type="password"]');
      submit = wrap.find('button[type="submit"]');
      input__hint = wrap.find('.input__hint');
      form_hint = wrap.find('.form__hint');
   });
   afterEach(() => {
      spySubmit.restore();
      spyCloseHint.restore();
      signup_stub.restore();
   });

   it("contains all inputs, button and validation hints", function() {
      expect(email).to.have.length(1);
      expect(pssword).to.have.length(2);
      expect(submit).to.have.length(1);
      expect(form_hint).to.have.length(1);
      expect(input__hint).to.have.length(3);
   });

   it("validation messages are hidden by default", function() {
      expect(form_hint.hasClass('hidden')).to.equal(true);
      input__hint.forEach((hint) => {
         expect(hint.hasClass('hidden')).to.equal(true);
      });
   });

   it("validation messages are visible if error", function() {
      context = {profile: new Profile_Store()};
      wrap = mount(<Signup  />, {context});
      wrap.context().profile.errorMessage = 'registration failed';
      expect(wrap.find('.form__hint').hasClass('visible')).to.equal(true);
      expect(wrap.find('.form__hint > span').at(0).text()).to.equal('registration failed');
   });

   it("validation messages are hidden while click close hint", function() {
      context.profile.errorMessage = 'registration failed';
      wrap = shallow(<Signup  />, {context});
      wrap.find('.form__closeHint').simulate('click');
      expect(context.profile.errorMessage).to.equal('');
      wrap = shallow(<Signup  />, {context});
      expect(wrap.find('.form__hint').hasClass('visible')).to.equal(false);
      sinon.assert.calledOnce(spyCloseHint);
   });

   it('form work correctly', () => {
      const event = {target: {value: 'cats'}};
      wrap.ref('email').simulate('change', event);
      wrap.simulate('submit',  { preventDefault() {} });
      chai.assert.equal(spySubmit.callCount, 1);
      sinon.assert.calledOnce(signup_stub);
   });

   it('don\'t handle Submit with empty values', () => {
      wrap.setState({
         validEmail: null,
         validPassword: null,
         validPasswordConfirm: false
      });
      wrap.simulate('submit',  { preventDefault() {} });
      sinon.assert.notCalled(signup_stub);
   });
});

Aucun commentaire:

Enregistrer un commentaire