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

Question

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

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

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]', 'sample@sample.com')
      .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 安全性(我强烈建议您不要这样做)或者您可以尝试更改请求的原始 header 。这很棘手，因为大多数现代浏览器都专门阻止此更改以保护用户。由于您使用的是 Nightwatch，因此您的环境通常是浏览器环境。

基于此错误您一定是错误地设置了服务器，因为看起来您的请求似乎仍在访问您的实际 API 而不是模拟服务器。

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

参见 nock对于替代解决方案，我即将开始使用它:)