moment-timezone.js – 在 Jest 测试中运行时出错答案

【问题标题】：moment-timezone.js – Getting Error When Running in Jest Testmoment-timezone.js – 在 Jest 测试中运行时出错
【发布时间】：2018-05-26 02:33:36
【问题描述】：

我在使用 moment-timezone.js 时遇到错误。它在网页上完美运行，但是当我尝试对其进行测试时，测试结果总是返回如下错误。

这是我在网页上使用的代码：

import moment from 'moment-timezone';

class TimezoneCityItem extends React.Component {

  componentDidMount(){
    this.setState({
      time: moment.tz(this.props.timezone)
    })
  }

  render(){
    return (
      <div>{this.state.time.format('HH:mm')}</div>
    )
  }
}

这是timezoneListDummyData：

const timezoneList = [
  { name: 'los-angeles', title: 'Los Angeles', timezone: 'America/Los_Angeles' },
  { name: 'washington', title: 'Washington', timezone: 'America/New_York' },
  { name: 'london', title: 'London', timezone: 'Europe/London' },
  { name: 'dubai', title: 'Dubai', timezone: 'Asia/Dubai' },
  { name: 'hongkong', title: 'Hongkong', timezone: 'Asia/Hong_Kong' },
];

export default timezoneList;

这是我在测试文件中使用的代码

import React from 'react';
import { shallow } from 'enzyme';
import TimezoneCityItem from '../TimezoneCity.item';
import timezoneList from '/lib/timezoneListDummyData'; // It just an array list of timezone

describe('<TimezoneCityItem />', () => {
   test('Should render TimezoneCityItem correctly', () => {
       const wrapper = shallow(<TimezoneCityItem {...timezoneList[0]} />);
       expect(wrapper).toMatchSnapshot();
   });
});

这是软件包的版本：

"moment": "~2.18.1",
"moment-timezone": "~0.5.13",

这是错误信息：

Test suite failed to run
TypeError: Cannot read property 'split' of undefined

  at node_modules/moment-timezone/moment-timezone.js:36:34
  at Object.<anonymous>.moment (node_modules/moment-timezone/moment-timezone.js:14:20)
  at Object.<anonymous> (node_modules/moment-timezone/moment-timezone.js:18:2)
  at Object.<anonymous> (node_modules/moment-timezone/index.js:1:120)
  at Object.<anonymous> (imports/ui/components/mainLayout/TimezoneCity.item.jsx:3:49)
  at Object.<anonymous> (imports/ui/components/mainLayout/TimezoneCity.jsx:3:47)
  at Object.<anonymous> (imports/ui/components/mainLayout/MainLayout.jsx:6:47)
  at Object.<anonymous> (imports/ui/components/mainLayout/__tests__/MainLayout.test.js:3:19)
      at Generator.next (<anonymous>)
      at new Promise (<anonymous>)
      at Generator.next (<anonymous>)
      at <anonymous>

【问题讨论】：

你在哪里定义了timezone prop？可以显示timezoneListDummyData 的数据吗？
你不应该使用componentWillMount而不是componentDidMount吗？也许这会解决它，因为渲染发生时状态不存在。
嗨@Rodius 我改成了componentWillMount，但它不起作用
如果你升级到两个包的当前版本，你会遇到同样的问题吗？
是的@MattJohnson，同样的问题"moment": "~2.19.4","moment-timezone": "~0.5.14",

标签： javascript reactjs timezone jestjs momentjs

【解决方案1】：

我遇到了同样的问题；这是我如何嘲笑时刻的一个例子：

let diffMins = updateThreshold + 1;
jest.mock('moment', () => {
  const mMoment = {
    diff: jest.fn(() => diffMins),
  };
  const fn = jest.fn(() => mMoment);
  fn.version = '2.24';
  fn.tz = jest.fn();
  fn.fn = jest.fn();
  return fn;
});

【讨论】：

【解决方案2】：

这可能有点晚了，但为了他人的利益。我们之所以得到这个，是因为 moment-timezone 需要来自 moment 包的版本号。

如在 moment-timezone.js 中看到的

	var momentVersion = moment.version.split('.'),
		major = +momentVersion[0],
		minor = +momentVersion[1];

当您运行 jest 时，它会尝试模拟您包含的所有内容，因此时刻被模拟。由于排除了属性，因此仅模拟了函数，您必须取消模拟 moment 和 moment-timezone 或在模拟的 moment 对象中包含虚假版本号。

【讨论】：

如何包含虚假版本号？
jest.mock('moment', () => jest.fn());