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

Question

I'm writing e2e test for a single page application with nightwatch.js .

I have some API request like an authentication. So I want to use fakeServer of sinon.js for mocking response data. Here's my code.

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();
  },
};

I can't mock response, and got the error below (When the API serve is running, got no error, but the response won't be mocked one).

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

I want to know, first of all, is it correct way to use sinon.js's fakeServer? And is that possible on e2e(and nightwatch.js)?

Please give me a help.

Answer 1

To answer your question I first need to explain the nature of the error you receive.

That's a CORS (cross origin resource sharing) error.

Basically, some service behind your single page app knows not to allow requests which don't originate from your app. The service returning that error (I can't tell what it is from the information you've posted) detects a request coming from not your app, and rejects it.

You could disable the CORS security of the service (I highly recommend you don't do this) or you could attempt to change the origin header of the request. This is tricky, as most modern browsers specifically prevent this change in order to protect users. Since you are using Nightwatch, your environment will, in general, be that of a browser.

Based on this error you must have set up the server incorrectly because it seems as if your request is still hitting your actual API and not the mocked server .

Probably because you when submit the form, the browser will still submit the form to where it is supposed to go (and not your mock server) unless it is told otherwise. Looking at your code, you are setting up a mock server, but from this file alone it is not clear how the browser is supposed to know to send requests to that mocked server.

See nock for an alternative solution, I'm about to start using it :)