Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Problem with TestUtils.renderIntoDoucment #13

Open
rzuniga64 opened this issue Jul 29, 2017 · 0 comments
Open

Problem with TestUtils.renderIntoDoucment #13

rzuniga64 opened this issue Jul 29, 2017 · 0 comments

Comments

@rzuniga64
Copy link

So I ran your Mocha/Chai tests and they failed. I kept getting this error:

 TypeError: document.createElement is not a function
  at Object.renderIntoDocument (node_modules\react-dom\lib\ReactTestUtils.js:85:24)
  at renderComponent (C:/User/Owner/mocha-chai/test/test_helper.js:29:46)
  at Context.<anonymous> (C:/User/Owner/mocha-chai/test/components/app_test.js:14:21)

So I looked at the React docs for renderIntoDocument and it states:

**renderIntoDocument(element)
Render a React element into a detached DOM node in the document. This function requires a DOM.

Note:
You will need to have window, window.document and window.document.createElement globally available before you import React. Otherwise React will think it can't access the DOM and methods like setState won't work.**

So if you look at the note you are not doing what it states in your tests. I tried to set window, window.document and window.document.createElement directly but I'm a noob at React so I used a solution from StackOverFlow:.

  1. install jsdomify.
  2. import jsdomify from 'jsdomify' into your test file.
  3. Set jsdomify.creat() before calling React in beforeEeach method.
  4. Do this for all test files. You have to do this for each "beforeEach". Then all tests passed.

so app_test.js will look like this:

import { renderComponent, expect } from '../test_helper';
import App from '../../src/components/app';
import {beforeEach} from 'mocha';
import jsdomify from 'jsdomify';

let React;

// Use 'describe' to group together similar tests
describe('App', () => {

let component;

beforeEach(() => {
    jsdomify.create();
    React = require('react');
    component = renderComponent(App);
});

it('shows a comment box', () => {
    expect(component.find('.comment-box')).to.exist;
});

it('shows a comment list', () => {
    expect(component.find('.comment-list')).to.exist;
});

});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant