React/Jest 错误：services.map 不是函数答案

【问题标题】：React/Jest error: services.map is not a functionReact/Jest 错误：services.map 不是函数
【发布时间】：2017-07-27 19:38:58
【问题描述】：

我有一个 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 中的样子：

【问题讨论】：

你需要访问服务：props.state.servicesReducer.services.services 注意额外的 services 属性（因为 initialServicesState 是一个包含 services 属性的对象）
是的，就是这样，我刚刚意识到我自己...想要发布您的答案？

标签： javascript reactjs testing jestjs

【解决方案1】：

问题是您正在构建属性“服务”重复的道具。

以下是相关部分：

在组件上，你从传递的 props 中获取 state.serviceReducer.services

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

props 在这里传递，服务从 import 中获取值：

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

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

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

导入来自这个导出，它是一个具有服务属性的对象。

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

所以，您必须将导出更改为

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

或建筑的道具

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

正如您在回答中已经想到的那样。

【讨论】：

【解决方案2】：

我需要将.services 数组附加到initialServicesState。那就是缺少的东西。

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

【讨论】：