[RequestMock] fetch call with mock is blocking test

[davidcunha]

I'm testing to mock a remote API endpoint (http://remote-api.com/api/customers/1) that is being called with "fetch" when opening a page http://localhost:3000/account.
I'm using Next.js 6.0.3 with React 16.2.0 and isomorphic-fetch 2.2.1:

pages/login.js

import React, { Component } from 'react';
import fetch from 'isomorphic-fetch';

function getCustomer(customerId) {
  return fetch(`http://remote-api.com/api/customers/${customerId}`, {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
    },
  })
    .then(res => res.json())
    .catch(error => error);
}

class Account extends Component {
  static async getInitialProps(ctx) {
    const customerId = 1;
    const customer = await getCustomer(customerId);

    return {
      customer,
    };
  }

  render() {
    const { customer } = this.props;
    return (
      <div>
        {customer ? (
          <div>
            <h1>Hi, {customer.name}</h1>
          </div>
        ) : null}
      </div>
    );
  }

Tested page URL: http://localhost:3000/account

Test code

const mock = RequestMock()
  .onRequestTo('http://remote-api.com/api/customers/1')
  .respond({
    id: 1,
    name: "John Doe"
  }, 200, {'Access-Control-Allow-Origin': '*'});

fixture('As a customer I want to be able to view my profile')
  .page('http://localhost:3000/account')
  .requestHooks(mock);

test('View my profile with success', async (t) => {
  await t.expect(Selector('h1').innerText).eql('John Doe');
});

When I run this test the function call "getCustomer" in "Account" class, which in turn calls a simple fetch and return the promise with the json content from a remote API (CORS), blocks the test at that specific line and no request is made and intercepted. However if I remove the mock, the test is "green".

I suppose this must be related with RequestMock + server-side rendering as in Next.js documentation the following description is mentioned:

"For the initial page load, getInitialProps will execute on the server only. getInitialProps will only be executed on the client when navigating to a different route via the Link component or using the routing APIs."

operating system: Mac OS X 10.13.4
testcafe version: 0.20.0
node.js version: 8.11.1

[Farfurix]

I'm working on it

[Farfurix]

Hello, @davidcunha.
While we are working on this problem, you can use the following workaround:

  .respond({
    id: 1,
    name: "John Doe"
-  }, 200, {'Access-Control-Allow-Origin': '*'});
+  }, 200, {'access-control-allow-origin': '*'});

[davidcunha]

@Farfurix Thanks, the workaround really worked. 😎

[AndreyBelym]

Hi @davidcunha, I've just published [email protected] with the fix! Please, update your TestCafe installation, and feel free to reopen the issue if the problem isn't fixed in your environment.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs or feature requests. For TestCafe API, usage and configuration inquiries, we recommend asking them on StackOverflow.