javascript - 我正在使用 Jest 在 React 中运行一些测试。但是当我运行测试时，我收到错误“无法读取未定义的属性'dateTime'

Question

我的文件中有多个测试，但我将使用第一个作为示例。

import React from 'react';
import { shallow } from 'enzyme';
import Event from '../Event';
import { mockData } from '../mock-data';

describe('<Event /> component', () => {
    let EventWrapper;
    beforeAll(() => {
        EventWrapper = shallow(<Event event={mockData} />)
    })
    test('rendered event container', () => {
        expect(EventWrapper.find('.event-container')).toHaveLength(1);
    });
})

然后这是我的 React 组件文件

import React, { Component } from 'react';

class Event extends Component {
    state = {
        showingDetails: false
    }

    eventDetails = () => {
        const showingDetails = this.state.showingDetails;
        if (showingDetails === false) {
            this.setState({
                showingDetails: true
            })
        } else {
            this.setState({
                showingDetails: false
            })
        }
    };

    render() {
        const { event } = this.props;
        const eventISODateTime = new Date(event.start.dateTime);
        const eventDate = eventISODateTime.toDateString();
        const eventTime = eventISODateTime.toTimeString();
        const eventTimeFormatted = `${eventTime.slice(0, 5)} ${eventTime.slice(18)}`;
        return <div className="event-container">
            <h1 className="event-summary">{event.summary}</h1>
            <p className="event-date">{eventDate} </p>
            <p className="event-time">{eventTimeFormatted}</p>
            <p className="event-location">{event.location}</p>
            {this.state.showingDetails && (
                <div className="event-details">
                    <h3 className="about-event">About event:</h3>
                    <a className="details-link" target="_blank" rel="noreferrer" href={event.htmlLink}>See details on Google Calendar</a>
                    <p className="event-description">{event.description}</p>
                </div>
            )}
            <button className="show-hide" onClick={() => this.eventDetails()}> {this.state.showingDetails ? 'hide description' : 'show description'} </button>
        </div >
    }
}

export default Event;

我在 render() 中定义了 dateTime。 我对每个文件使用相同的 { mockData }。当我在 localhost 或 Github gh-pages 上加载我的网站时，它工作正常并正确显示数据，因此在运行测试“npm run test”时它只是给我一个错误

这是我从中提取的 mockData 文件

const mockData = [
    {
        "kind": "calendar#event",
        "etag": "\"3181161784712000\"",
        "id": "4eahs9ghkhrvkld72hogu9ph3e_20200519T140000Z",
        "status": "confirmed",
        "htmlLink": "https://www.google.com/calendar/event?eid=NGVhaHM5Z2hraHJ2a2xkNzJob2d1OXBoM2VfMjAyMDA1MTlUMTQwMDAwWiBmdWxsc3RhY2t3ZWJkZXZAY2FyZWVyZm91bmRyeS5jb20",
        "created": "2020-05-19T19:17:46.000Z",
        "updated": "2020-05-27T12:01:32.356Z",
        "summary": "Learn JavaScript",
        "description": "Have you wondered how you can ask Google to show you the list of the top ten must-see places in London? And how Google presents you the list? How can you submit the details of an application? Well, JavaScript is doing these. :) \n\nJavascript offers interactivity to a dull, static website. Come, learn JavaScript with us and make those beautiful websites.",
        "location": "London, UK",
        "creator": {
            "email": "[e-mail]",
            "self": true
        },
        "organizer": {
            "email": "[e-mail]",
            "self": true
        },
        "start": {
            "dateTime": "2020-05-19T16:00:00+02:00",
            "timeZone": "Europe/Berlin"
        },
        "end": {
            "dateTime": "2020-05-19T17:00:00+02:00",
            "timeZone": "Europe/Berlin"
        },
        "recurringEventId": "4eahs9ghkhrvkld72hogu9ph3e",
        "originalStartTime": {
            "dateTime": "2020-05-19T16:00:00+02:00",
            "timeZone": "Europe/Berlin"
        },
        "iCalUID": "[e-mail]",
        "sequence": 0,
        "reminders": {
            "useDefault": true
        },
        "eventType": "default"
    },
    {
        "kind": "calendar#event",
        "etag": "\"3181159875584000\"",
        "id": "3qtd6uscq4tsi6gc7nmmtpqlct_20200520T120000Z",
        "status": "confirmed",
        "htmlLink": "https://www.google.com/calendar/event?eid=M3F0ZDZ1c2NxNHRzaTZnYzdubW10cHFsY3RfMjAyMDA1MjBUMTIwMDAwWiBmdWxsc3RhY2t3ZWJkZXZAY2FyZWVyZm91bmRyeS5jb20",
        "created": "2020-05-19T19:14:30.000Z",
        "updated": "2020-05-27T11:45:37.792Z",
        "summary": "React is Fun",
        "description": "Love HTML, CSS, and JS? Want to become a cool front-end developer? \n\nReact is one of the most popular front-end frameworks. There is a huge number of job openings for React developers in most cities. \n\nJoin us in our free React training sessions and give your career a new direction. ",
        "location": "Berlin, Germany",
        "creator": {
            "email": "[e-mail]",
            "self": true
        },
        "organizer": {
            "email": "[e-mail]",
            "self": true
        },
        "start": {
            "dateTime": "2020-05-20T14:00:00+02:00",
            "timeZone": "Europe/Berlin"
        },
        "end": {
            "dateTime": "2020-05-20T15:00:00+02:00",
            "timeZone": "Europe/Berlin"
        },
        "recurringEventId": "3qtd6uscq4tsi6gc7nmmtpqlct",
        "originalStartTime": {
            "dateTime": "2020-05-20T14:00:00+02:00",
            "timeZone": "Europe/Berlin"
        },
        "iCalUID": "[e-mail]",
        "sequence": 0,
        "reminders": {
            "useDefault": true
        },
        "eventType": "default"
    },
    {
        "kind": "calendar#event",
        "etag": "\"3181161784712000\"",
        "id": "4eahs9ghkhrvkld72hogu9ph3e_20200521T140000Z",
        "status": "confirmed",
        "htmlLink": "https://www.google.com/calendar/event?eid=NGVhaHM5Z2hraHJ2a2xkNzJob2d1OXBoM2VfMjAyMDA1MjFUMTQwMDAwWiBmdWxsc3RhY2t3ZWJkZXZAY2FyZWVyZm91bmRyeS5jb20",
        "created": "2020-05-19T19:17:46.000Z",
        "updated": "2020-05-27T12:01:32.356Z",
        "summary": "Learn JavaScript",
        "description": "Have you wondered how you can ask Google to show you the list of the top ten must-see places in London? And how Google presents you the list? How can you submit the details of an application? Well, JavaScript is doing these. :) \n\nJavascript offers interactivity to a dull, static website. Come, learn JavaScript with us and make those beautiful websites.",
        "location": "London, UK",
        "creator": {
            "email": "[e-mail]",
            "self": true
        },
        "organizer": {
            "email": "[e-mail]",
            "self": true
        },
        "start": {
            "dateTime": "2020-05-21T16:00:00+02:00",
            "timeZone": "Europe/Berlin"
        },
        "end": {
            "dateTime": "2020-05-21T17:00:00+02:00",
            "timeZone": "Europe/Berlin"
        },
        "recurringEventId": "4eahs9ghkhrvkld72hogu9ph3e",
        "originalStartTime": {
            "dateTime": "2020-05-21T16:00:00+02:00",
            "timeZone": "Europe/Berlin"
        },
        "iCalUID": "[e-mail]",
        "sequence": 0,
        "reminders": {
            "useDefault": true
        },
        "eventType": "default"
    },
];
export { mockData };

标签： javascriptreactjsjestjs