无法编写正在渲染中调用矩方法的组件的快照测试

如何解决无法编写正在渲染中调用矩方法的组件的快照测试

我正在尝试测试以下组件：

import React,{ Component } from 'react';
import { connect } from 'react-redux'
import moment from 'moment'
import { SingleDatePicker } from 'react-dates'
import MealList from './MealList';
import { capitalize } from '../helpers/helpers'

export class MealSummary extends Component {
    state = {
        date: moment(),calendarFocused: false
    }
    onDateChange = date => {
        if (date) this.setState({ date })
    }
    onFocusChange = ({ focused }) => this.setState({ calendarFocused: focused })

    renderMealCategory = (mealCategory) => {
        return this.props.meals.filter(meal => meal.mealCategory === mealCategory && meal.date.isSame(this.state.date,'day'))
    }

    renderFilteredTotal = (mealCategory) => {
        return this.props.meals.filter(meal => meal.mealCategory === mealCategory && meal.date.isSame(this.state.date,'day'))
            .reduce((sum,n) => sum + n.calories,0)
    }

    renderTotal = () => (this.props.meals.filter(meal => meal.date.isSame(this.state.date,'day')).reduce((sum,0))

    renderMeals = () => {
        const categories = ['breakfast','lunch','dinner','snack']

        return categories.map(category => {
            return (
                <div key={category}>
                    <h1>{capitalize(category)}</h1>
                    <MealList meals={this.renderMealCategory(category)} />
                    <h4>Total: {this.renderFilteredTotal(category)}</h4>
                </div>
            )
        })
    }

    render() {
        return (
            <div>
                <h1>Summary Page</h1>
                <SingleDatePicker
                    date={this.state.date}
                    onDateChange={this.onDateChange}
                    focused={this.state.calendarFocused}
                    onFocusChange={this.onFocusChange}
                    numberOfMonths={1}
                    isOutsideRange={() => false}
                    id="caloriEat-meal-summary" />
                {this.renderMeals()}
                <div>
                    <h1>Total Calories Consumed: {this.renderTotal()}</h1>
                </div>
            </div>
        );
    }
}

const mapStateToProps = (state) => ({
    meals: state.meals
})

export default connect(mapStateToProps)(MealSummary)

我编写了以下失败的测试：

import React from 'react';
import { shallow } from 'enzyme'
import { MealSummary } from '../../components/MealSummary'
import { meals } from '../fixtures/mealReducer'


describe('<MealSummary />',() => {
    test('should render MealSummary',() => {
        const renderMealCategory = jest.fn()
        const wrapper = shallow(<MealSummary meals={meals} />)
        expect(wrapper).toMatchSnapshot()
    })
})

我收到错误：

    TypeError: meal.date.isSame is not a function

      17 | 
      18 |     renderMealCategory = (mealCategory) => {
    > 19 |         return this.props.meals.filter(meal => meal.mealCategory === mealCategory && meal.date.isSame(this.state.date,'day'))
         |                                                                                                ^
      20 |     }
      21 | 
      22 |     renderFilteredTotal = (mealCategory) => {

对象餐具有meals.date属性，该属性将调用矩量方法isSame来比较状态内的日期。在单独的调用中，我有相当多的这些功能可以正确呈现页面。为什么无法识别该功能？我尝试为isSame const isSame = jest.fn()传递模拟函数，并将其作为道具传递给MealSummary，但没有用。如何使此测试与从其他（瞬间）库运行的方法一起正常工作，以便可以创建快照？

解决方法

您要从meals传入import { meals } from '../fixtures/mealReducer'，我们需要查看化简器中的内容，但是我猜您有类似的东西：

const meals = [{ mealCategory: 'breakfast',date: new Date()}]

什么时候应该拥有

const meals = [{ mealCategory: 'breakfast',date: moment()}]