I am just setting out to set up my tests since updating to react v15.5.0
I believe that they have done a lot to bring all of the testing in-house
as it were. So you don't need as many external sources.
however, i just can't seem to get a very simple test working.
index.spec.js
/* eslint-disable object-property-newline */
import React from 'react';
import ReactTestUtils from 'react-dom/test-utils' // ES6
import {expect} from 'chai';
import Splash from '../../../src/components/Splash';
//Logo Details
import Logo from '../../../src/components/shared/logo'
import logo from '../../../src/components/shared/logo/_Logo.css';
import * as font from '../../../src/components/shared/font/fontello.css';
describe('Splash', () => {
it('must be defined', () => {
expect(Splash).to.be.defined; //passes
})
it('should have kindred logo', () => {
const SplashRendered = ReactTestUtils.renderIntoDocument(<Splash/>);
const RenderedLogo = ReactTestUtils.findRenderedDOMComponentWithClass(SplashRendered, '.logo')
expect(RenderedLogo.className).to.equal(logo.logo +' '+font['icon-logo']); //fails
})
});
Mocha Helpers
// jsdom
const exposedProperties = ['window', 'navigator', 'document'];
global.document = jsdom('');
global.window = document.defaultView;
Object.keys(document.defaultView).forEach((property) => {
if (typeof global[property] === 'undefined') {
global[property] = document.defaultView[property];
}
});
global.navigator = {
userAgent: 'node.js'
};
Splash/index.js
import React from 'react';
import { NavLink } from 'react-router-dom'
import Logo from '../shared/logo/index';
import * as styles from './style.css';
class Splash extends React.Component {
render(){
return (
<div className={styles.indexAppContent}>
<NavLink to="/home" className={styles.index}>
<Logo />
</NavLink>
</div>
);
}
}
export default Splash;
Terminal
> BABEL_ENV=test nyc mocha --reporter tap 'test/**/*.spec.js'
Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.
1..2
ok 1 Splash must be defined
not ok 2 Splash should have kindred logo
TypeError: Cannot call a class as a function
at _classCallCheck (/var/www/kindred.com/src/components/Splash/index.js:1:10298)
at Splash (/var/www/kindred.com/src/components/Splash/index.js:1:10514)
I believe I am missing a fundimental part of testing app. I believed we love react up into jsdom which means we don't need a browser, it then loads up. But clearly rather than just mounting this single component it is trying to run everything including my router
via Jamie Hutber