React testing improvements

Description

I’m normally used to using Enzyme but I noticed Nx used react-testing-library in our project w/ no option to change it within Nx.

I started trying to learn react-testing-library & then ran into this issue because ~the jest custom matchers are not setup.~ I guess I just need to import this at the top of every test

Motivation

~Better testing out of the box w/o having to debug the setup~ Some users may want to use Enzyme

Suggested Implementation

• offer an option for Enzyme?
• flesh out the react-testing-library setup a bit more
  • yarn add @testing-library/jest-dom --dev
  • add import '@testing-library/jest-dom'; to the test because the example on https://testing-library.com/docs/react-testing-library/example-intro produces type error about missing .toHaveTextContent() method, and only changing it to this seems to fix it

Alternate Implementations

~You could omit tests in the react builder? Although that would take away some of the benefits of using Nx in the first place.~

[karol-majewski]

To anyone interested: I managed to add types for custom matchers (such as toHaveTextContent ) by modifying the tsconfig.spec.json in the directory I’m testing:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../../dist/out-tsc",
    "module": "commonjs",
-   "types": ["jest", "node"]
+   "types": ["jest", "node", "testing-library__jest-dom"]
  },
  "include": ["**/*.spec.ts", "**/*.spec.tsx"]
}

With this change, you don’t need to import @testing-library/jest-dom in every test file.

(Make sure to install @types/testing-library__jest-dom first.)

[Shaglock]

I had the same issue and in my case in my library folder libs/<mylib> I created jest.setup.ts with import, same as in this comment, but I didn’t make any type imports, instead, in tsconfig.spec.json I added to include like this:

{
...
  "include": [
    "./jest.setup.ts",
    ...
...
  ]
}

and had no issues. I wanted to use jest.preset.js that NX provides but didn’t manage to make it work. I wish I could do this with preset, so that I don’t have to create jest.setup.ts in every lib/app I have and do the same includes in tsconfigs everywhere.