await-async-query matching `cy.findBy*` commands

[vfernandestoptal]

Hey, I've got an .eslintrc.js file at the root of the project that extends plugin:testing-library/react.

This is working great for Jest test files, however, it is also reporting errors in Cypress test files when using commands like cy.findByText() or any of the other find commands.

I'm using eslint-plugin-testing-library 3.0.4

[vfernandestoptal]

Just reverted to 3.0.3 to check, and that works ok with Cypress.
But now it doesn't catch issues when doing:

    const root = render(<Component />);
    root.findByText("Some text");

[Belco90]

Hello Vitor. I'm afraid this is a common issue when mixing different testing tools like jest and cypress, with linting rules for some of them.

At the moment, this package is not checking what's the syntax used in a test file so it will just complain if it finds the corresponding code matching a rule. I've run into this issue before, so I'm trying to figure out what's the best way to try to solve it here.

This problem doesn't affect just this package. I got the same issue with eslint-plugin-jest and eslint-plugin-jest-formatting as well, so I got errors related to jest on my cypress files. However, I found a workaround for it. I'm using different suffix for cypress tests (.spec.js) and jest (.test.js). Having this pre requisite, we can enable some eslint rules only for specific files using overrides key on .eslintrc. This is how my .eslintrc looks like:

var merge = require('lodash/merge');

module.exports = {
  extends: [
    'react-app',
    'prettier',
    'prettier/react',
    'plugin:import/recommended',
    'plugin:import/react',
    'plugin:cypress/recommended',
  ],

  rules: {
    // here you enable all the global rules you need EXCEPT those related to jest or testing-library
    'react/react-in-jsx-scope': 0,
    'react/prop-types': 2,
    'react/self-closing-comp': 2,
    // ...
    ],
  },

  // then in `overrides` key we specifically enable jest or testing-library rules
  overrides: [
    merge(
      {},
      require('eslint-plugin-jest').configs.style,
      require('eslint-plugin-jest').configs.recommended,
      require('eslint-plugin-jest-formatting').configs.recommended,
      require('eslint-plugin-testing-library').configs.react,
      {
        files: ['**/*.test.js'], // <-- this does the trick by only executing the rules on those files
        plugins: ['jest', 'jest-formatting', 'testing-library'],
        rules: {
          'jest/consistent-test-it': 'error',
          'jest/prefer-todo': 'error',
          'jest/lowercase-name': ['error', { ignore: ['describe'] }],
          'jest/no-truthy-falsy': 'error',
          'testing-library/no-debug': [
            'error',
            {
              renderFunctions: ['setup', 'renderWithRedux', 'renderWithTheme'],
            },
          ],
          'testing-library/no-manual-cleanup': 'error',
          'testing-library/no-wait-for-empty-callback': 'error',
          'testing-library/prefer-explicit-assert': 'error',
          'testing-library/prefer-presence-queries': 'error',
          'testing-library/prefer-screen-queries': 'error',
          'testing-library/prefer-wait-for': 'error',
        },
      }
    ),
  ],
};

I hope this helps you configuring the rules you want for cypress and jest.

[Belco90]

Closing this one after 1 month of inactivity.