Linting Rule: no-enzyme-when-hooks

[billfienberg]

Issue Description

As a developer that is trying to test a hook-based function component, I want to see a linting error in my editor when I try to use Enzyme, so I learn to not use that pattern ASAP.

Background

Until React@16.8, most components were written using class components. Additionally, most components were tested with Enzyme.

Once React@16.8 was released, people started using function components with hooks.

Problem

People run into problems when trying to test hook-based function components with Enzyme because Enzyme doesn't fully support hooks.

Actual example of VFS team member encountering this problem:

• https://dsva.slack.com/archives/C5HP4GN3F/p1588100133239100

Front end tasks

1. Write the linting rule
2. Install the linting rule
3. Configure the linting rule

Acceptance Criteria

Developers see a linting error in their console when they try to test a hook-based function component using Enzyme.

---

How to configure this issue

• [ ] Attached to a Milestone (when will this be completed?)
• [ ] Attached to an Epic (what body of work is this a part of?)
• [ ] Labeled with Team (product support, analytics-insights, operations, service-design, tools-be, tools-fe)
• [ ] Labeled with Practice Area (backend, frontend, devops, design, research, product, ia, qa, analytics, contact center, research, accessibility, content)
• [ ] Labeled with Type (bug, request, discovery, documentation, etc.)

[mchelen-gov]

another place to start might be adding a warning about this (and possible workarounds) to https://department-of-veterans-affairs.github.io/veteran-facing-services-tools/getting-started/common-tasks/new-unit-test

[erikphansen]

The issue isn't with Enzyme, it's with shallow mounting. Folks could still use Enzyme's mount and it will work with hooks.

[mchelen-gov]

@erikphansen yup true, maybe we could mention that in docs?