meteor - React component shown as Unknown -
my react component gets rendered react tree unknown 1 though named stateless functional default export. props relayed correctly since component's name isn't shown in tree tests fail. did miss?
the main component tested.
import react 'react'; import {meteor} 'meteor/meteor'; import {createcontainer} 'meteor/react-meteor-data'; import proptypes 'prop-types'; import {notes} '../api/notes'; import notelistheader './notelistheader'; import notelistitem './notelistitem'; import notelistemptyitem './notelistemptyitem'; export const notelist = (props) => { return ( <div> <notelistheader /> <br /> notelist {props.notes.length} {props.notes.length === 0 ? <notelistemptyitem /> : undefined} {props.notes.map((note) => { return <notelistitem key={note._id} note={note} /> })} </div> ); }; notelist.proptypes = { notes: proptypes.array.isrequired }; export default createcontainer(() => { meteor.subscribe('notes'); return { notes: notes.find().fetch() }; }, notelist);
the tests file. components notelistitem
, notelistemptyitem
rendered unknown ones.
import react 'react'; import {meteor} 'meteor/meteor'; import expect 'expect'; import {mount} 'enzyme'; import {notelist} './notelist'; const notes = [ { _id: "notelist_test_id_1", title: "notelist_test_title_1", body: "notelist_test_body_1", updatedat: 0, userid: "notelist_test_userid_1" }, { _id: "notelist_test_id_2", title: "notelist_test_title_2", body: "notelist_test_body_2", updatedat: 0, userid: "notelist_test_userid_2" } ]; if (meteor.isclient) { describe("notelist", function() { it("should render notelistitem each of 2 notes", function() { const wrapper = mount(<notelist notes={notes} />); expect(wrapper.find('notelistitem').length).tobe(2); expect(wrapper.find('notelistemptyitem').length).tobe(0); }); it("should render notelistemptyitem if 0 notes", function() { const wrapper = mount(<notelist notes={[]} />); expect(wrapper.find('notelistitem').length).tobe(0); expect(wrapper.find('notelistemptyitem').length).tobe(1); }); }); }
one of components test. gets rendered unknown component test component.
import react 'react'; import proptypes 'prop-types'; import moment 'moment'; const notelistitem = (props) => { return ( <div> <h5>{props.note.title || "untitled"}</h5> <p>{props.note._id} - {moment(props.note.updatedat).format('dd.mm.yyyy hh:mm:ss')}</p> </div> ); }; notelistitem.proptypes = { note: proptypes.object.isrequired }; export default notelistitem;
the terminal output shows
unable resolve modules: "react/addons" in /d/full stack web apps/short-lnk-boilerplate/node_modules/enzyme/build/react-compat.js (web.browser) "react/lib/reactcontext" in /d/full stack web apps/short-lnk-boilerplate/node_modules/enzyme/build/react-compat.js (web.browser) "react/lib/executionenvironment" in /d/full stack web apps/short-lnk-boilerplate/node_modules/enzyme/build/react-compat.js (web.browser)
meteor suggests running meteor npm install --save react
did still terminal output remains same.
Comments
Post a Comment