Electron + React + TestCafe MockRequest Intercept won't work

[ynnelson]

I have an electron application for which I am attempting to write e2e testing but when it comes the MockRequest I seem to be struggling, I followed the documentation on TestCafe website but to no avail, my api call does not seemed to be intercepted and it tries and hit the actual API I have setup.

The code in my react component that would trigger the call is as follow:

onChangeBetaCode = debounce(async input => {
    // eslint-disable-next-line prefer-const
    let { formError, formSuccess, betaCheckLoading, nextStepDisabled } = {
      ...this.state
    };

    const options = {
      url: `${requestBase}/account/beta/verify`,
      method: 'post',
      headers: {
        'Content-Type': 'application/json'
      },
      data: {
        vcode: input
      }
    };

    if (!input) {
      betaCheckLoading = false;
      delete formSuccess.betacode;
      formError.betacode = i18n.t('form.betaCodeRequired');
      this.setState({
        betaCheckLoading,
        formSuccess,
        formError,
        nextStepDisabled: true
      });
      return;
    }

    delete formSuccess.betacode;
    delete formError.betacode;
    betaCheckLoading = true;
    this.setState({ betaCheckLoading, formSuccess, formError });

    try {
      await axios(options);
      betaCheckLoading = false;
      formSuccess.betacode = true;
      nextStepDisabled = false;
    } catch (error) {
      betaCheckLoading = false;
      formError.betacode = i18n.t('register.betaCodeNotValid');

      if (error.response && error.response.status !== 400) {
        formError.betacode = error;
      }

      nextStepDisabled = true;
    }

    this.setState({
      betaCheckLoading,
      formSuccess,
      formError,
      nextStepDisabled
    });
  }, 500);

So far nothing crazy my test file Registration.e2e.ts is as follow:

/* eslint jest/expect-expect: off, jest/no-test-callback: off */
import { getIn } from 'immutable';
import { waitForReact, ReactSelector } from 'testcafe-react-selectors';
import { Selector, RequestMock, RequestLogger } from 'testcafe';

const getInput = id => Selector('input').withAttribute('name', id);

const assertNoConsoleErrors = async t => {
  const { error } = await t.getBrowserConsoleMessages();
  await t.expect(error).eql([]);
};

const envAPI = require('../../app/env_api.json');

const sdkUrl = envAPI.test;

const registrationMock = RequestMock()
  .onRequestTo(`${sdkUrl}/account/beta/verify`)
  .respond(null, 200, {
    'access-control-allow-origin': `${sdkUrl}`
  });

const getRegisterLink = () => Selector('[data-tid="goto-registration"]');

fixture`Login Screen`
  .page('../../app/login_window/index.html')
  .requestHooks(registrationMock)
  .afterEach(assertNoConsoleErrors);

test('Register Link Exists', async t => {
  await t.expect(getRegisterLink().innerText).eql('Register Instead');
});

test('Register new account', async t => {
  await t.click(getRegisterLink()).typeText(getInput('betacode'), '908ee6111e').ok();
});

The first test passes no problem the second hits the actual api and doesn't return the desired response of 200, it returns 400 which notifies that the betacode I want to check is invalid.

I have been trying to debug this for hours and can't figure out what's wrong and why the MockRequest intercept isn't working???

[github-actions[bot]]

Thank you for submitting this issue. We would love to assist you and diagnose it. However, we need a simple sample that we can easily run on our side in order to replicate the issue and research its cause. Without a sample, we are not able to figure out what's going on and why this issue occurs. We look forward to your response.

[ynnelson]

I'll try and make a simple version of it and post.

[ynnelson]

test.zip

I tried to make a sample app with Electron, but in this sample app I run up against CORS issue I am unsure how to resolve because I don't control the API server, I used https://jsonplaceholder.typicode.com/ for a dummy API.

Any guidance here would be helpful.

[felis2803]

Duplicate: https://github.com/DevExpress/testcafe-browser-provider-electron/issues/78.