如何使用nightwatch.js和sinon.js模拟API响应？

Question

我正在用nightwatch.js为单页应用程序编写e2e测试。

我有一些API请求，如身份验证。所以我想使用sinon.js的fakeServer来模拟响应数据。这是我的代码。

import sinon from 'sinon';

const WAIT_TIME = 5000;
const host = 'http://localhost:3000/#/';
const uri = new RegExp(escape('/users/login'));

module.exports = {
  'Login Test': function(browser) {
    let server;

    browser
      .windowSize('basicTest', 1440, 710)
      .url(host + 'account/login')
      .waitForElementVisible('body', WAIT_TIME)
      .setValue('input[type=email]', '[email protected]')
      .setValue('input[type=password]', 'password')
      .execute(function() {
        server = sinon.fakeServer.create();
        server.respondWith('POST', uri, [
          200, { 'Content-Type': 'application/json' }, JSON.stringify(someResponseData),
        ]);
      })
      .submitForm('form')
      .execute(function() {
        server.respond();
      })
      .waitForElementNotPresent('input.[type=submit]', WAIT_TIME) // the page should be redirected to another page
      .execute(function() {
        server.restore();
        server = null;
      })
      .end();
  },
};

我无法模拟响应，并得到以下错误（当API服务正在运行时，没有错误，但响应将不会被模拟）。

Error: Origin is not allowed by Access-Control-Allow-Origin

我想知道，首先，使用sinon.js的fakeServer是正确的方法吗？这可能在e2e（和nightwatch.js）上吗？

请给我一个帮助。

Answer 1

要回答您的问题，我首先需要解释您收到的错误的性质。

这是一个CORS（跨源资源共享）错误。

基本上，单页应用程序背后的某些服务知道不允许不是来自您的应用程序的请求。返回该错误的服务（我无法判断您发布的信息是什么）会检测到来自您的应用程序的请求，并拒绝该请求。

您可以禁用服务的CORS安全性（我强烈建议您不要这样做）或者您可以尝试更改请求的原始标头。这很棘手，因为大多数现代浏览器专门阻止此更改以保护用户。由于您使用的是Nightwatch，因此您的环境通常是浏览器的环境。

基于此错误，您必须错误地设置服务器，因为您的请求似乎仍然是您的实际API而不是模拟服务器。

可能是因为您在提交表单时，浏览器仍然会将表单提交到它应该去的地方（而不是您的模拟服务器），除非另有说明。查看您的代码，您正在设置一个模拟服务器，但仅从该文件中不清楚浏览器应该知道如何向该模拟服务器发送请求。

请参阅nock以获得替代解决方案，我即将开始使用它:)