javascript - React/Jest错误:services.map不是函数

我有一个ServicesContainer，它寻找servicesReducer来呈现ServiceCard的列表。

服务容器

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { ServiceCard } from '../../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

此处一切正常，但是测试不喜欢我传递给它的状态：

import React from 'react'
import * as enzyme from 'enzyme'
import toJson from 'enzyme-to-json'

import { ServicesContainer } from './ServicesContainer'
import ServiceCard from '../../components/Services/serviceCard'
import { initialServicesState } from '../../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();
    });

});

^来自servicesReducer的initialServicesState

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 all internal applications and services",
      admins: [ "Chuck Roe", "Steve Wonder" ],
      group: "Black Flag"
    }
  ]
}

ServiceCard组件

import React, { Component } from '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>
    )
  }
}

这是Redux State在ServicesContainer中的样子：

最佳答案

问题是您正在使用属性“ services”重复创建道具。

以下是相关部分：

在组件上，您可以通过传递的props获得state.serviceReducer.services

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

道具在这里传递，服务从导入中获取价值：

import { initialServicesState } from '../../reducers/Services/servicesReducer'

const state = {
   servicesReducer: {
       services: initialServicesState
    }
}

const servicesContainer = enzyme.shallow(<ServicesContainer state={ state }/>);

导入来自此导出，该导出是具有services属性的对象。

export const initialServicesState = {
    services: [
        {
           _id: _id,
           name: "GeoStore",

因此，您必须将导出更改为

export const initialServicesState =
    [
        {
            _id: _id,
            name: "GeoStore",

或建造的道具

const state = {
    servicesReducer: {
        services: initialServicesState.services
    }
}

正如您已经在答案中找到的那样。