I have problem with testing my React SFC. I'd like to test if 'PointDetailConfig' has two 'DayHours' components (can be mocked). I don't know why wrapper.find() not finding 'DayHours'. It worked with React statefull component. Received value indicate that 'DayHours' is props.children. Should I assert wrapper.props().children? Thanks for any tips how to test it properly.
expect(received).toHaveLength(length)
Expected value to have length:
2
Received:
{Symbol(enzyme.__root__): {Symbol(enzyme.__root__): [Circular], Symbol(enzyme.__unrendered__): <PointDetailConfig increaseCurrentDayPeriod={[]} increaseNextDayPeriod={[]} reduceCurrentDayPeriod={[]} reduceNextDayPeriod={[]} />, Symbol(enzyme.__renderer__): {"batchedUpdates": [Function batchedUpdates], "getNode": [Function getNode], "render": [Function render], "simulateEvent": [Function simulateEvent], "unmount": [Function unmount]}, Symbol(enzyme.__node__): {"instance": null, "key": undefined, "nodeType": "host", "props": {"children": [<DayHours increaseCurrentDayPeriod={[]} increaseHours={[]} increaseNextDayPeriod={[]} name="some name" reduceCurrentDayPeriod={[]} reduceHours={[]} reduceNextDayPeriod={[]} />, <DayHours increaseCurrentDayPeriod={[]} increaseHours={[]} increaseNextDayPeriod={[]} name="some name" reduceCurrentDayPeriod={[]} reduceHours={[]} reduceNextDayPeriod={[]} />]}, "ref": null, "rendered": [{"instance": null, "key": undefined, "nodeType": "function", "props": {"increaseCurrentDayPeriod": [], "increaseHours": [], "increaseNextDayPeriod": [], "name": "Doba bieżąca", "reduceCurrentDayPeriod": [], "reduceHours": [], "reduceNextDayPeriod": []}, "ref": null, "rendered": null, "type": [Function DayHours]}, {"instance": null, "key": undefined, "nodeType": "function", "props": {"increaseCurrentDayPeriod": [], "increaseHours": [], "increaseNextDayPeriod": [], "name": "Doba następna", "reduceCurrentDayPeriod": [], "reduceHours": [], "reduceNextDayPeriod": []}, "ref": null, "rendered": null, "type": [Function DayHours]}], "type": "div"}, Symbol(enzyme.__nodes__): [{"instance": null, "key": undefined, "nodeType": "host", "props": {"children": [<DayHours increaseCurrentDayPeriod={[]} increaseHours={[]} increaseNextDayPeriod={[]} name="some name" reduceCurrentDayPeriod={[]} reduceHours={[]} reduceNextDayPeriod={[]} />, <DayHours increaseCurrentDayPeriod={[]} increaseHours={[]} increaseNextDayPeriod={[]} name="some name" reduceCurrentDayPeriod={[]} reduceHours={[]} reduceNextDayPeriod={[]} />]}, "ref": null, "rendered": [{"instance": null, "key": undefined, "nodeType": "function", "props": {"increaseCurrentDayPeriod": [], "increaseHours": [], "increaseNextDayPeriod": [], "name": "some name", "reduceCurrentDayPeriod": [], "reduceHours": [], "reduceNextDayPeriod": []}, "ref": null, "rendered": null, "type": [Function DayHours]}, {"instance": null, "key": undefined, "nodeType": "function", "props": {"increaseCurrentDayPeriod": [], "increaseHours": [], "increaseNextDayPeriod": [], "name": "some name", "reduceCurrentDayPeriod": [], "reduceHours": [], "reduceNextDayPeriod": []}, "ref": null, "rendered": null, "type": [Function DayHours]}], "type": "div"}], Symbol(enzyme.__options__): {"adapter": {"options": {"lifecycles": {"componentDidUpdate": {"prevContext": true}}, "supportPrevContextArgumentOfComponentDidUpdate": true}}, "attachTo": undefined, "disableLifecycleMethods": true, "hydrateIn": undefined}}, Symbol(enzyme.__unrendered__): null, Symbol(enzyme.__renderer__): {"batchedUpdates": [Function batchedUpdates], "getNode": [Function getNode], "render": [Function render], "simulateEvent": [Function simulateEvent], "unmount": [Function unmount]}, Symbol(enzyme.__node__): undefined, Symbol(enzyme.__nodes__): [], Symbol(enzyme.__options__): {"adapter": {"options": {"lifecycles": {"componentDidUpdate": {"prevContext": true}}, "supportPrevContextArgumentOfComponentDidUpdate": true}}, "attachTo": undefined, "disableLifecycleMethods": true, "hydrateIn": undefined}}
received.length:
0PointDetailConfig.test.js
import React from 'react';
import renderer from 'react-test-renderer';
import { shallow, configure, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-15';
import PointDetailConfig from '../PointDetailConfig/PointDetailConfig';
configure({ adapter: new Adapter() });
// jest.mock('../PointDetailConfig/DayHours', () => {
// return 'DayHours mock';
// });
describe('PointDetailConfig', () => {
let wrapper;
let testProps;
beforeEach(() => {
testProps = {
};
wrapper = shallow(<PointDetailConfig {...testProps} />, { disableLifecycleMethods: true });
});
it('should render correctly', () => {
const tree = renderer.create(<PointDetailConfig {...testProps} />);
expect(tree.toJSON()).toMatchSnapshot();
});
it('should render DayHours', () => {
console.log(wrapper.find('DayHours'));
expect(wrapper.find('DayHours')).toHaveLength(2);
});
});PointDetailConfig.js
import React from 'react';
import PropTypes from 'prop-types';
import DayHours from './DayHours';
function PointDetailConfig(props) {
const currentDayProps = {
increaseHours: props.increaseCurrentDayPeriod,
reduceHours: props.reduceCurrentDayPeriod,
name: 'some name',
...props
};
const nextDayProps = {
increaseHours: props.increaseNextDayPeriod,
reduceHours: props.reduceNextDayPeriod,
name: 'some name',
...props
};
return (
<div>
<DayHours {...currentDayProps} />
<DayHours {...nextDayProps} />
</div>
);
}
PointDetailConfig.defaultProps = {
//default props
};
PointDetailConfig.propTypes = {
//define proptypes
};
export default PointDetailConfig;Since you expect to find the component DayHours import it in the test suite and pass it as a component to find instead of a string.
import React from 'react';
import renderer from 'react-test-renderer';
import { shallow, configure, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-15';
import DayHours from path/to/DayHours;
import PointDetailConfig from '../PointDetailConfig/PointDetailConfig';
configure({ adapter: new Adapter() });
describe('PointDetailConfig', () => {
let wrapper;
let testProps;
beforeEach(() => {
testProps = {
};
wrapper = shallow(<PointDetailConfig {...testProps} />, { disableLifecycleMethods: true });
});
it('should render correctly', () => {
const tree = renderer.create(<PointDetailConfig {...testProps} />);
expect(tree.toJSON()).toMatchSnapshot();
});
it('should render DayNominHours', () => {
console.log(wrapper.find(DayHours));
expect(wrapper.find(DayHours)).toHaveLength(2);
});
});Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments