Issue with react-addon-test-utils createElement

Question

I am updating my code from the now deprecated react/addons package to the react-addon-test-utils package. I use jsdom and inject a document and window element, as shown below.

import jsdom from 'jsdom';
import chai from 'chai';
import chaiImmutable from 'chai-immutable';

const doc = jsdom.jsdom('<!doctype html><html><body></body></html>');
const win = doc.defaultView;

global.document = doc;
global.window = win;

Object.keys(window).forEach((key) => {
  if (!(key in global)) {
    global[key] = window[key];
  }
});

chai.use(chaiImmutable);

And here is my unit test.

import {expect} from 'chai';
import ErrorBlock from '../src/Controls/ErrorBlock';
import React from 'react-addons-test-utils';

const {renderIntoDocument, scryRenderedDOMComponentsWithClass, Simulate}
  = React;

describe('ErrorBlock', () => {

  it('renders properly', () => {
    const id = 'test';
    const message = 'my message';
    const alertStyle = "alert-danger";
    const component = renderIntoDocument(
      <ErrorBlock id={id} message={message} alertStyle={alertStyle} />
    );
    const spanEntry = scryRenderedDOMComponentsWithClass(component, id + 'AlertMessage');
    expect (spanEntry.length).to.equal(1);
  });
});

I am in the process of getting unit testing setup for a React UI module for use on some projects. However, when I switch over to the new react-addons-test-utils package, I get the following error:

TypeError: _reactAddonsTestUtils2.default.createElement is not a function

This error occurs on the line where I define my component.

Why am I getting this error ONLY when using the new package?

facebook.github.io/react/docs/… You will need to have window, window.document and window.document.createElement globally available before you import React. — oobgam
– oobgam, Commented Dec 28, 2015 at 15:59
This is why I included the first block of code. They already are. — Sinistralis
– Sinistralis, Commented Dec 28, 2015 at 16:00
I'm sorry, I don't think I see window.document.createElement globally available and only see these global.document = doc; global.window = win;. — oobgam
– oobgam, Commented Dec 28, 2015 at 16:02
That's what the .forEach is doing. I can also show you output from console.log(document.window.createElement). Trust me, it's there. — Sinistralis
– Sinistralis, Commented Dec 28, 2015 at 16:06
@Sinistralis Did you figure out the issue? I'm having the same problem. — Sergey
– Sergey, Commented Jan 25, 2016 at 4:52

voxter · Accepted Answer · 2017-06-16 02:56:22Z

3

It may be late, but i think this is our solution . Let change from :

const doc = jsdom.jsdom('<!doctype html><html><body></body></html>');
const win = doc.defaultView;

global.document = doc;
global.window = win;

to :

const doc = new jsdom.JSDOM('<!doctype html><html><body></body></html>');
const win = doc.window;

global.document = win.document;
global.window = win;

It will fix all of our issues

answered Jun 16, 2017 at 2:56

voxter

9252 gold badges15 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Issue with react-addon-test-utils createElement

And here is my unit test.

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

And here is my unit test.

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related