Question

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

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

测试如下：

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);

但是，每当我运行测试时，都会收到以下错误；

ShallowWrapper::setState() can only be called on class components

Answer 1

您的课程由injectIntl包装。这是您遇到错误的直接原因，因为injectIntl的内部不是类。您将需要测试DateTimePicker类的实例，该实例没有被此High-Order组件包装。您可以通过在酶包装程序上调用.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();
});

当我尝试设置状态时，玩笑测试失败

1 个答案: