testcafe-testing-library

[benmonro]

What is your Test Scenario?

Any type of test

What are you suggesting?

support for dom-testing-library (or perhaps a new testcafe-testing-library inspired by the Kent Dodds implementation for cypress)

What alternatives have you considered?

Selector.ByText("the text")

Additional context

dom-testing-library is such an great way to write tests from the user's perspective. I would love to see this type of syntax in testcafe. https://github.com/kentcdodds/dom-testing-library

[AlexKamaev]

Thank you for this information. We cannot promise that we'll implement this feature in the near future. However, I find the dom-testing-library library interesting, so I'll mark this ticket as enhancement.
And of course any PR is always welcome.

[benmonro]

@AlexKamaev I am trying to get this working using a ClientFunction. Maybe I'm doing something wrong but I'm getting a strange error:

1) SyntaxError: unknown: Unexpected token, expected , (1:23)

      Browser: Chrome 73.0.3683 / Mac OS X 10.14.4

         4449 |// message.
         4450 |
         4451 |pp$5.raise = function (pos, message) {
         4452 |  var loc = getLineInfo(this.input, pos);
         4453 |  message += " (" + loc.line + ":" + loc.column + ")";
       > 4454 |  var err = new SyntaxError(message);
         4455 |  err.pos = pos;
         4456 |  err.loc = loc;
         4457 |  throw err;
         4458 |};
         4459 |

         at Parser.pp$5.raise (/Users/bmonro001/Code/testcafe-testing-library/node_modules/babylon/lib/index.js:4454:13)
         at Parser.pp.unexpected (/Users/bmonro001/Code/testcafe-testing-library/node_modules/babylon/lib/index.js:1761:8)
         at Parser.pp.expect (/Users/bmonro001/Code/testcafe-testing-library/node_modules/babylon/lib/index.js:1749:33)
         at Parser.pp$3.parseExprList (/Users/bmonro001/Code/testcafe-testing-library/node_modules/babylon/lib/index.js:4296:12)
         at Parser.pp$3.parseExprAtom (/Users/bmonro001/Code/testcafe-testing-library/node_modules/babylon/lib/index.js:3714:28)
         at Parser.pp$3.parseExprSubscripts (/Users/bmonro001/Code/testcafe-testing-library/node_modules/babylon/lib/index.js:3494:19)
         at Parser.pp$3.parseMaybeUnary (/Users/bmonro001/Code/testcafe-testing-library/node_modules/babylon/lib/index.js:3474:19)
         at Parser.pp$3.parseExprOps (/Users/bmonro001/Code/testcafe-testing-library/node_modules/babylon/lib/index.js:3404:19)
         at Parser.pp$3.parseMaybeConditional (/Users/bmonro001/Code/testcafe-testing-library/node_modules/babylon/lib/index.js:3381:19)
         at Parser.pp$3.parseMaybeAssign (/Users/bmonro001/Code/testcafe-testing-library/node_modules/babylon/lib/index.js:3344:19)

Here's my sample code:

import { ClientFunction } from "testcafe";

const rtl = require("dom-testing-library");

fixture`selectors`.page`http://localhost:13370`;

test("getByText", async t => {
  const getTheText = ClientFunction(
    () => {
      return rtl.getByText(document.body, "getByText");
    },
    {
      dependencies: { rtl }
    }
  );

  const text = await getTheText();
  await t.expect(text).eql("getByText");
});

From What I read from the docs, I need to pass in react-testing-library as a dependency to the ClientFunction, right? Am I missing something?

[benmonro]

@Farfurix @AndreyBelym any help / guidance on the above error would be much appreciated.

[miherlosev]

@benmonro

I see the error is in the babylon library.
By provided information it's very difficult to determinate the cause of the problem.
I can investigate this case if you can provide a simple project that I can run on my side.

[benmonro]

@miherlosev yeah sure, here ya go: https://github.com/benmonro/testcafe-testing-library

after npm install you can run the tests w/ npm run test:testcafe

The tests I'm looking at are located in
tests/testcafe/selectors.js

many thanks in advance!

[miherlosev]

import { ClientFunction, Selector } from "testcafe";
import queries from "../../src";
// Problem is here
const rtl = require("dom-testing-library");
....

You shouldn't use this way to pass dom-testing-library module as a ClientFunction dependency. You need to build a distributive for dom-testing-library that allows to evaluate it on the tested web page as described here.
Also, there is a suggestion for your user case. Track this to be informed about our progress.  

[benmonro]

@miherlosev any tips you can provide on how to consume a library like dom-testing-library which does a simple export of various functions to be used in node/jest.

for example, dom-testing-library will do export { queries }

How can I consume that from within an eval or client function?

from what I can tell both of the examples that you linked to are attaching globals to window.

much appreciated.

[kentcdodds]

dom-testing-library has a UMD build (which is currently broken, but you can use an old version while we get it fixed https://github.com/kentcdodds/dom-testing-library/issues/251).

[benmonro]

Sweet! Thanks @kentcdodds

I'll try it out and report back here

[benmonro]

@kentcdodds I noticed you fixed the UMD build in the latest release of dom-testing-library, and it seems to work, so thanks for that! 🙏

@miherlosev so the good news is I have a working version of testcafe-testing-library 🎉

The bad news, is that the only way I was able to inject DomTestingLibrary into the dom, was using this approach: https://github.com/benmonro/testcafe-testing-library/blob/81525c204ce81beb979135cbf235e07641de19c4/src/index.js#L16-L23

I'd prefer to use the approach you referred me to earlier being used in axe-testcafe, but for the life of me, I can't seem to get DomTestingLibrary to show up in window, and I believe it's because hammerhead is making some changes to the UMD code that is being given to eval.

really would be nice to have something like https://github.com/DevExpress/testcafe/issues/1739 to support this natively within testcafe, so that I can just inject a UMD string into the dom.

For now I'll write some docs, but I'm pretty happy that I can actually write testcafe tests using getBy* 😄

https://github.com/benmonro/testcafe-testing-library/blob/master/tests/testcafe/selectors.js

[miherlosev]

@benmonro

You can inject the dom-testing-library.umd.js file into the page using the eval function.

const LIBRARY_UMD_PATH    = path.join('./node_modules', 'dom-testing-library/dist/dom-testing-library.umd.js');
const LIBRARY_UMD_CONTENT = fs.readFileSync(LIBRARY_UMD_PATH).toString();

//TODO: figure out how to do this without having to use the external CDN.
export const addTestcafeTestingLibrary = async t => {
  const inject = ClientFunction(() => window.eval(script), { dependencies: { script: LIBRARY_UMD_CONTENT } });

  await inject.with({boundTestRun: t})()
}

I will close this issue because the origin enhancement has been implemented.
Now, it's possible to use dom-testing-libray in TestCafe via the testcafe-testing-libray module;

[benmonro]

Thank you @miherlosev! I think adding window. to the eval is what fixed it, not sure why...

[lock[bot]]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests. We recommend you ask TestCafe API, usage and configuration inquiries on StackOverflow.