Description
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:.
- install jsdomify.
- import jsdomify from 'jsdomify' into your test file.
- Set jsdomify.creat() before calling React in beforeEeach method.
- 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;
});
});