Discussion on: React Specific Selectors in TestCafe

View post

This is really beneficial! Coming from a beginner in React though, I am finding it difficult to really utilize the React plugin for TestCafe.

Maybe the website I'm having to test isn't really following React principals, but how do you print properties, state, keys, etc. from React? I want to print stuff to the console, but get this: ReExecutablePromise { _then: [], _fn: [Function], _taskPromise: null }

marques woodson • Jun 19 '19

Where are you doing the console.log? In the React component, or in your test?

Tall-KU • Jun 19 '19

no, it is within the TestCafe fixture/test



test.only('testing', async t => {
    var doubleArrowLeft = ReactSelector('Button').withProps({Key : 'fal fa-chevron-double-left'});
    console.log(doubleArrowLeft.getReact())
    await t.expect(doubleArrowLeft).eql(true);
})

marques woodson • Jun 19 '19

doubleArrowLeft.getReact() returns a promise. So try this:

var doubleArrowLeft = ReactSelector('Button').withProps(
  { Key : 'fal fa-chevron-double-left' }
);
const doubleArrowLeftData = await doubleArrowLeft.getReact();
console.log(doubleArrowLeftData)

Tall-KU • Jun 19 '19

That didn't work....

marques woodson • Jun 19 '19

Here's what I tested really quick:

fixture("A fixture this is").page("http://localhost:3002");

test("this is a test", async t => {
  const header = ReactSelector("Header").withProps({ name: "marques" });
  const stuff = await header.getReact();
  console.log(stuff);
});

outputs:

$ testcafe chrome:headless test.ts
 Running tests in:
 - HeadlessChrome 74.0.3729 / Mac OS X 10.14.5

 A fixture this is
{ state: {}, props: { name: 'marques' }, key: null }
 ✓ this is a test

Try this out

Tall-KU • Jun 19 '19

Awesome, thanks for the help. So, I figured out my issue. I was trying to locate the selector by 'Key', which is NOT a property!

marques woodson • Jun 19 '19

Aaah yea, you'd want to use withKey instead of withProps. I'm glad you got it figured out :)