Javascript 模拟通知Api

我有以下代码：

const browserNotification = new Notification(title, options);

browserNotification.onshow = () => this.props.sendTracking('in-app-chat-notification-start');

browserNotification.onclick = event => {
  const notification = event.target;

  this.props.router.push(notification.data.url.split('.com')[1]);
  this.props.sendTracking('in-app-chat-notification-complete');

  notification.close();
};

我尝试模拟窗口通知，因为我需要调用这两个方法（onshow和onclick）：

it（'应该调用onshow方法'，（）=>{
window.Notification=（）=>({
onshow:jest.fn（），
onclick:jest.fn（）
});
const instance=shallow（）.instance（）；
myMethod（）；
//window.Notification.onShow（）；
预期（发送跟踪）。已被催收时间（1）；
});

我知道如果我这样做，我会失去原来的方法，但是，由于测试没有窗口和通知，我不得不模拟它

如何正确地使用Jest来传递此代码

我也试过用嘲弄，但最后，还是和window一样

覆盖范围：

---

谢谢

最后，通过拆分问题中显示的代码，我成功地测试了这两种方法

就是这样：

handleNewFirebaseNotification = notification => {
  const title = notification.data.title || 'letgo';
  const options = {
    body: notification.data.body,
    icon: notification.data.icon || 'https://static.letgo.com/site-images/logo_letgo_share_fb.jpg',
    data: {
      url: notification.data.url
    }
  };

  this.handleNotifications(title, options);
};

handleNotifications = (title, options) => {
  const browserNotification = new Notification(title, options);

  browserNotification.onshow = this.onShowNotification;
  browserNotification.onClick = this.onClickNotification;
}

onShowNotification = () => {
  this.props.sendTracking('in-app-chat-notification-start')
}

onClickNotification = event => {
  const notification = event.target;

  this.props.router.push(notification.data.url.split('.com')[1]);
  this.props.sendTracking('in-app-chat-notification-complete');

  notification.close();
}

然后我可以用酶来测试所有这些新方法。例如：

it('should call handleNewFirebaseNotification and then call handleNotifications with title and icon', () => {
  window.Notification = () => ({
    onshow: jest.fn(),
    onclick: jest.fn()
  });
  const instance = shallow(mockComponent()).instance();
  const notificationMock = {
    data: {
      title: 'test',
      body: 'test',
      icon: 'test',
      url: 'test'
    }
  };

  instance.handleNewFirebaseNotification(notificationMock);

  expect(window.Notification()).toEqual(expect.objectContaining({
    onshow: expect.any(Function),
    onclick: expect.any(Function)
  }));
});

新方法之一：

it('should call onShowNotification', () => {
  const instance = shallow(mockComponent()).instance();

  instance.onShowNotification();

  expect(sendTrackingSpy).toHaveBeenCalledTimes(1);
});

---

最后，通过拆分问题中显示的代码，我成功地测试了这两种方法

就是这样：

handleNewFirebaseNotification = notification => {
  const title = notification.data.title || 'letgo';
  const options = {
    body: notification.data.body,
    icon: notification.data.icon || 'https://static.letgo.com/site-images/logo_letgo_share_fb.jpg',
    data: {
      url: notification.data.url
    }
  };

  this.handleNotifications(title, options);
};

handleNotifications = (title, options) => {
  const browserNotification = new Notification(title, options);

  browserNotification.onshow = this.onShowNotification;
  browserNotification.onClick = this.onClickNotification;
}

onShowNotification = () => {
  this.props.sendTracking('in-app-chat-notification-start')
}

onClickNotification = event => {
  const notification = event.target;

  this.props.router.push(notification.data.url.split('.com')[1]);
  this.props.sendTracking('in-app-chat-notification-complete');

  notification.close();
}

然后我可以用酶来测试所有这些新方法。例如：

it('should call handleNewFirebaseNotification and then call handleNotifications with title and icon', () => {
  window.Notification = () => ({
    onshow: jest.fn(),
    onclick: jest.fn()
  });
  const instance = shallow(mockComponent()).instance();
  const notificationMock = {
    data: {
      title: 'test',
      body: 'test',
      icon: 'test',
      url: 'test'
    }
  };

  instance.handleNewFirebaseNotification(notificationMock);

  expect(window.Notification()).toEqual(expect.objectContaining({
    onshow: expect.any(Function),
    onclick: expect.any(Function)
  }));
});

新方法之一：

it('should call onShowNotification', () => {
  const instance = shallow(mockComponent()).instance();

  instance.onShowNotification();

  expect(sendTrackingSpy).toHaveBeenCalledTimes(1);
});

---

可能是Hi的副本，我已经检查过了，对我没有帮助。正如你所看到的，我做的完全一样，但没有全局（我使用的是窗口）。无论如何，谢谢：）我想它会是一样的，只是在你的情况下用global替换window，然后它应该让我再次检查。同样，我的问题是我想在测试中激发那些方法（onclick和onshow）。可能是Hi的重复，我已经检查过了，对我没有帮助。正如你所看到的，我做的完全一样，但没有全局（我使用的是窗口）。无论如何，谢谢：）我想这是一样的，只要在你的情况下用global替换window，它应该让我再次检查。同样，我的问题是我想在测试中激发那些方法（onclick和onshow）。这不是真的，因为我使用的是arrow函数，因此

这个。props

不是未定义的。请不要投反对票，或者至少在评论之前试试这个。这不是真的，因为我使用的是箭头函数，因此

这个。props

不是未定义的。请不要投反对票，或者至少在评论之前试试这个