sthzg
commented
8 years ago Hi @dannymk, the shallow render helper lets you make assertions on what your component renders, so it is already one level too deep in the tree to give you access to the outer props.
If you only want to make sure that defaultProps have a certain value you can simply assert this on the component object, without any additional helpers at all:
describe('<DanComponent />', () => {
it('has "==blank" as a defaultProp for "name"', () => {
expect(DanComponent.defaultProps.name).to.equal('==blank');
});
});If you want to assert things on the rendered component, I suggest you take a look at Enzyme, which is endorsed on the official FB docs like this
Airbnb has released a testing utility called Enzyme, which makes it easy to assert, manipulate, and traverse your React Components' output. If you're deciding on a unit testing library, it's worth checking out: http://airbnb.io/enzyme/
It is one of these packages where skimming over the api just makes you feel happy.
It is also integrated into the V4-generator, which is currently in the makings (you can already install the beta with npm i generator-react-webpack@beta). It has Enzyme setup for you, although you could also simply install it on your existing projects.
To test a (default) prop with Enzyme, you can do this:
import { mount } from 'enzyme';
describe('<DanComponent />', () => {
let component;
beforeEach(() => {
component = mount(<DanComponent />);
});
describe('when rendering the component', () => {
it('the defaultProp for "name" should be "==blank"', () => {
expect(component.prop('name')).to.equal('==blank');
});
});
});
dannymk
weblogixx
ZigaVukcevicDev
Is there an example anywhere on how to test default properties?
'use strict'; import React from 'react'; require('styles//Dan.less'); class DanComponent extends React.Component { render() { return (
{this.props.name} is now here!
);
}
}
DanComponent.displayName = 'DanComponent';
// Uncomment properties you need
DanComponent.propTypes = {
name: React.PropTypes.string
};
DanComponent.defaultProps = {
name: '==blank'
};
export default DanComponent;
== test
'use strict';
import createComponent from 'helpers/shallowRenderHelper';
import DanComponent from 'components//DanComponent.js';
describe('DanComponent', () => {
let component;
beforeEach(() => {
component = createComponent(DanComponent);
});
it('should have its component className as dan-component', () => {
expect(component.props.className).to.equal('dan-component');
});
it('Name default property should be ==blank', () => {
expect(component.defaultProps.name).to.equal('==blank');
});
});
I understand that 'react-addons-test-utils' may help in this area but I wanted to see if there was an example anywhere on here a la "out of the box".