Skip to content
GitLab

Add ESLint plugins for Jest, Jest DOM, and Testing Library

Closed Nick McCurdy requested to merge github/fork/nickmccurdy/testing-library-linting into master

Rationale

I was excited to see Testing Library get added to the default template (cra-template), but I noticed the officially recommended ESLint plugins were missing from eslint-config-react-app. They both help to make matcher usage more consistent and fix some bugs where improper usage can causing failing or false positive test results. I also added the Jest plugin which has similar benefits for ordinary Jest usage (with or without testing library packages).

Changes

Added recommend ESLint configs for Jest, Jest DOM, and React Testing Library.

Note on react-scripts

The webpack config used in react-scripts currently only runs ESLint via eslint-loader from the app's entry point. Unfortunately this means that test files will be excluded from the built-in ESLint runner. To make these config additions more useful in react-scripts I attempted to set up jest-runner-eslint, but I'm getting the following error when adding the multiple projects configuration:

Error: Jest: Cannot use configuration as an object without a file path.

Source: https://github.com/nickmccurdy/create-react-app/blob/92075f408baddacde5863fcf9bff6ca9ded1299e/packages/react-scripts/scripts/utils/createJestConfig.js#L68-L80

Help with this error would be appreciated, as it would be a lot more useful to have these ESLint plugins working in react-scripts. Currently they're still useful when using ESLint outside react-scripts, such as through an ESLint extension or the eslint CLI outside of a CRA app.

Testing

  • Ran eslint manually (outside of react-scripts) and confirmed that linter rules are enabled.
  • Created an example app with yarn create-react-app my-app (note: this doesn't support linting test files yet, it's just a smoke test to make sure the ESLint config isn't broken).