React native 当我试图设置状态时，Jest测试失败

我正在尝试为我编写的组件编写一些测试。它是一个日期/时间组件，当您从日历设置日期时，它将日期设置为其本地状态，然后移动到时间选择组件

虽然这一切都作为一个组件完美地工作，但我似乎无法通过测试。当前在jest测试中设置状态时遇到问题

测试如下：

it('Time picker should appear', () => {
  const navigation = {
    navigate: jest.fn(),
  };
  const output = shallow(<DateTimePicker navigation={navigation} />);
  const date = new Date('January 31 2018 12:30');
  output.setState({selectedDate: date});
  expect(output).toMatchSnapshot();
});

import React from 'react';
import { View } from 'react-native';
import { injectIntl, FormattedMessage } from 'react-intl';
import { DatePicker }  from '../../components/DatePicker';
import TimePicker from '../../components/TimePicker';
import Text from '../../components/Text';
import { propTypes } from './prop-types';
import styles from './styles';

export class DateTimePicker extends React.Component {

  state = {
    selectedDate: '',
  }

  confirmDateAndTime = (hours, minutes) => {
    const { selectedDate } = this.state;
    const date = new Date(selectedDate);
    date.setHours(hours);
    date.setMinutes(minutes);
    const { navigation } = this.props;
    /**
     * navigate back to booking flight edit with the updated
     * date selection.
     */
    navigation.navigate('BookingFlightEdit', date);
  }

  render() {
    const { selectedDate } = this.state;
    /**
     * if date has been selected - move onto the time selection
     */
    if(selectedDate.length>0) {
      return (
        <View>
          <View>
            <Text style={styles.title} type="h1">
              <FormattedMessage
                defaultMessage="Select Time"
                id="date_time_picker.select_time"
              />
            </Text>
          </View>
          <View style={styles.time}>
            <TimePicker
              testID='time-button'
              onPress={(hh,mm) => this.confirmDateAndTime(hh, mm)}
            />
          </View>
        </View>
      );
    }
    return (
      <View>
        <Text style={styles.title} type="h1">
          <FormattedMessage
            defaultMessage="Select Date"
            id="date_time_picker.select_date"
          />
        </Text>
        <DatePicker
          testID = 'date-button'
          onDayPress={(date) => this.setState({selectedDate: date.dateString})}
        />
      </View>
    );
  }
}

DateTimePicker.propTypes = propTypes;

export default injectIntl(DateTimePicker);

---

您的类由

injectIntl

包装。这是您遇到的错误的直接原因，因为

injectIntl

的内部不是类。您需要测试未被此高阶组件包装的

DateTimePicker

类的实例。您可以通过在酶包装器上调用

.dive（）

来实现这一点

it('Time picker should appear', () => {
  const navigation = {
    navigate: jest.fn(),
  };
  const output = shallow(<DateTimePicker navigation={navigation} />);
  const date = new Date('January 31 2018 12:30');
  const datePicker = output.dive();
  datePicker.setState({selectedDate: date});
  expect(datePicker).toMatchSnapshot();
});

it（'应该出现时间选择器'，（）=>{
常量导航={
导航：jest.fn（），
};
常量输出=浅（）；
施工日期=新日期（“2018年1月31日12:30”）；
const datePicker=output.dive（）；
datePicker.setState（{selectedDate:date}）；
expect（datePicker.toMatchSnapshot（）；
});

it('Time picker should appear', () => {
  const navigation = {
    navigate: jest.fn(),
  };
  const output = shallow(<DateTimePicker navigation={navigation} />);
  const date = new Date('January 31 2018 12:30');
  const datePicker = output.dive();
  datePicker.setState({selectedDate: date});
  expect(datePicker).toMatchSnapshot();
});