Testcafe + React + Browserstack

Question

I am trying to use testcafe-react-selectors in my TestCafé tests to make testing the react parts of my app easier. The tests run fine locally, but when I try to run them in the CI, the react parts don't work.

Example jsx:

export const Nametag = ({ url, title, subTitle, disabled, 
 showChooseAnother, chooseAnotherText, }) => (
   <div className={`MediaHotBar__element text--ellipsis ${disabled ? 
      'MediaHotBar__element--background' : ''}`}>
    <a className="text__link--no-underline" href={url} disabled={disabled} >
      {title}
    </a>
  <div className="text--detail text--gray-7">{ showChooseAnother ? 
    <ChooseAnother id={chooseAnotherText} /> : <span>{subTitle} 
    </span> }</div>
  </div>
);

Example test:

Test snippet:

test('Verifies a user can navigate to medias from an In Progress 
  test', async (t) => {

  const mediaName = 'AB Test Variant';

  await waitForReact();

  await t
    .click(abTestShowPage.getMediaLink(mediaName))
    .expect(mediaPage.title.textContent).contains(mediaName);
 });

Page object:

import { Selector } from 'testcafe';
import { ReactSelector } from 'testcafe-react-selectors';

export default class ABTestShowPage {
  constructor() {
    this.mediaNametag = ReactSelector('Nametag');
  }

  getMediaLink(mediaName) {
    return this.mediaNametag.withText(mediaName).find('a');
  }
}

I'm pretty stumped about what could be going wrong. I was able to run things interactively in Browserstack, and the dom is identical to what it looks like locally. Worst case, I can get rid of the testcafe-react-selectors because all of the not-React-related stuff works just fine, but I'd really like to figure this out because it makes the tests much neater. Thanks!

EDIT: This is the TestCafé output for this:

1) The specified selector does not match any element in the DOM tree.

   > | Selector([function])
     |   .withText('AB Test Variant')
     |   .find('a')

  Browser: Chrome 69.0.3497 / Mac OS X 10.13.6

     46 |
     47 |  await waitForReact();
     48 |
     49 |  await t
   > 50 |    .click(abTestShowPage.getMediaLink(mediaName))
     51 |    .expect(mediaPage.title.textContent).contains(mediaName);
     52 |});
     53 |

     at click
  (/usr/src/app/testcafe/tests/abTesting/abTestShow.js:50:6)

The other React test case that is failing looks like this:

1) AssertionError: expected null to deeply equal 'Draft'

  Browser: Chrome 69.0.3497 / Mac OS X 10.13.6

     71 |  await waitForReact();
     72 |  const testStatus = await
  abTestShowPage.statusBox.getReact(({ props }) => props.status);
     73 |
     74 |  await t
     75 |
  .expect(abTestShowPage.showPageTitleTxt.textContent).contains('Untitled
  A/B Test')
   > 76 |    .expect(testStatus).eql('Draft');
     77 |});
     78 |
     79 |test('Verify that a user can delete an A/B test', async (t)
  => {
     80 |  const deleteButton =
  abTestIndexPage.getDeleteButton('Delete This');
     81 |

     at eql
  (/usr/src/app/testcafe/tests/abTesting/abTestIndex.js:76:25)

Answer 1

We figured out a way around this. I don't know if it's the best way, but adding displayName to the react components gets around the minification. I couldn't figure out a way to get webpack and uglify to do this for us, since we're on webpack 1, but I'm now unblocked!