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)
