javascript - React/Jest error: services.map is not a function -

i have servicescontainer looks servicesreducer render list of servicecards.

servicescontainer

import react, { component } 'react' import { connect } 'react-redux' import { servicecard } '../../components'  export class servicescontainer extends component {     constructor(props) {         super(props);         this.state = {             services: props.state.servicesreducer.services         }     }      onformsubmit(e, user) {         e.preventdefault();         this.props.searchuser(user)     }      render() {         const services = this.state.services;          return (             <div classname='services-container'>                 <ul>                     { services.map(service =>                         <servicecard                             key={ service.name }                             name={ service.name }                             description={ service.description }                             admins={ service.admins }                             group={ service.group } />) }                 </ul>             </div>         )     } }  const mapstatetoprops = (state) => {     return {         state     } }  const serviceslistcontainer = servicescontainer; export default connect(mapstatetoprops, null)(serviceslistcontainer) 

servicescontainer.test

everything works fine here, test not state i'm passing it:

import react 'react' import * enzyme 'enzyme' import tojson 'enzyme-to-json'  import { servicescontainer } './servicescontainer' import servicecard '../../components/services/servicecard' import { initialservicesstate } '../../reducers/services/servicesreducer'  const state = {     servicesreducer: {         services: initialservicesstate     } }  const servicescontainer = enzyme.shallow(<servicescontainer state={ state }/>);  describe('<servicescontainer /> component', () => {      it('should render', () => {         const tree = tojson(servicescontainer);         expect(tree).tomatchsnapshot();     });  }); 

^ initialservicesstate servicesreducer

export const initialservicesstate = {   services: [     {       _id: _id,       name: "geostore",       description: "manage store delivery zones",       admins: [ "chuck roe", "steve wonder" ],       group: "black flag"     },     {       _id: _id2,       name: "rights manager ui",       description: "manage internal applications , services",       admins: [ "chuck roe", "steve wonder" ],       group: "black flag"     }   ] } 

servicecard component

import react, { component } 'react'  export default class servicecard extends react.component {   constructor(props) {     super(props);   }    render () {     const name = this.props.name;     const description = this.props.description;     const admins = this.props.admins;     const group = this.props.group;      return (       <section classname="service-card">         <h4>{ name }</h4>         <p>{ description }</p>         <em>{ group }</em>         <div classname="services-admins">           <ul>             <li>               { admins.map(admin => admin) }             </li>           </ul>         </div>       </section>     )   } } 

this redux state looks in servicescontainer:

the issue building props property "services" duplicated.

here relevant parts:

on component state.servicereducer.services passed props

this.state = {     services: props.state.servicesreducer.services } 

the props passed here, , services gets value import:

import { initialservicesstate } '../../reducers/services/servicesreducer'  const state = {    servicesreducer: {        services: initialservicesstate     } }  const servicescontainer = enzyme.shallow(<servicescontainer state={ state }/>); 

and import comes export object services property.

export const initialservicesstate = {     services: [         {            _id: _id,            name: "geostore", 

so, have either change export to

export const initialservicesstate =      [         {             _id: _id,             name: "geostore", 

or props building to

const state = {     servicesreducer: {         services: initialservicesstate.services     } } 

as had figured in answer.