testing-library / testing-library/eslint-plugin-testing-library

Fail no-container on use of innerHTML

Open
#883 6 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
TypeScript
Stars
1.1k
Forks
168
Avg merge
15h 44m
Merged PRs (30d)
14

Description

What rule do you want to change?

no-container

Does this change cause the rule to produce more or fewer warnings?

More warnings

How will the change be implemented?

The rule will look for usages of container.innerHTML in addition to looking for usages of methods like container.querySelector()

Example code
const { container } = render(<Greeting />);
expect(container.innerHTML).toContain("Hello");
How does the current rule affect the code?

The current rule allows this code. It only errors if a method like container.querySelector is accessed.

How will the new rule affect the code?

The updated rule would fail on usages of container.innerHTML just as it does with the methods.

Anything else?

Descriptions of the rule would need to be updated from saying "disallow the user of container methods" to "container methods and properties" (or something)

If we found that anyone has use cases where using innerHTML is commonly needed but container methods are not, we could either make it configurable whether it's allowed, or make it a separate rule very similar to no-container

Do you want to submit a pull request to change the rule?

Yes

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating the no-container rule implementation, its tests, and its rule descriptions. Extend the existing method checks to cover container.innerHTML, update wording from methods to methods and properties, and verify that the example now produces a warning.

Written by the indexing model from the issue text.

Assessment

Tech stack
eslint, javascript, typescript
Domain
testing, tooling
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.