test(linter): port react-jsx-uses-vars rules to no_unused_vars (#7731)

I added the test cases from
[eslint-plugin-react/jsx-uses-vars](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/tests/lib/rules/jsx-uses-vars.js)
to a `react.rs` file in the `no_unused_vars` tests module.

After adding the new tests, they immediately passed without any source
code changes required. It would seem that the linter already supported
this rule, but now there will be tests to support it.

---------

Co-authored-by: Cameron <[email protected]>

crates/oxc_linter/src/rules/eslint/no_unused_vars/tests/mod.rs

@@ -1,5 +1,6 @@
 mod eslint;
 mod oxc;
+mod react;
 mod typescript_eslint;
 
 use super::NoUnusedVars;

crates/oxc_linter/src/rules/eslint/no_unused_vars/tests/react.rs

@@ -0,0 +1,133 @@
+//! Test cases from eslint-plugin-react (jsx/no-uses-vars)
+
+use super::NoUnusedVars;
+use crate::{tester::Tester, RuleMeta as _};
+
+/// !!!! STOP !!!!
+/// Are you fixing a bug in this rule and want to add a test case? Please put
+/// it in `oxc.rs`. These are _only_ the test cases ported from the original
+/// React rule.
+#[test]
+fn test() {
+    let pass = vec![
+        "
+			var App;
+			React.render(<App/>);
+        ",
+        "
+			function foo() {
+				var App;
+				var bar = React.render(<App/>);
+				return bar;
+			};
+			foo()
+        ",
+        "
+			var a = 1;
+			React.render(<img src={a} />);
+        ",
+        "
+			var App;
+			function f() {
+				return <App />;
+			}
+			f();
+        ",
+        "
+			var App;
+			<App.Hello />
+        ",
+        "
+			class HelloMessage {};
+			<HelloMessage />
+        ",
+        "
+			class HelloMessage {
+				render() {
+				var HelloMessage = <div>Hello</div>;
+				return HelloMessage;
+				}
+			};
+			<HelloMessage />
+        ",
+        "
+			function foo() {
+				var App = { Foo: { Bar: {} } };
+				var bar = React.render(<App.Foo.Bar/>);
+				return bar;
+			};
+			foo()
+        ",
+        "
+			function foo() {
+				var App = { Foo: { Bar: { Baz: {} } } };
+				var bar = React.render(<App.Foo.Bar.Baz/>);
+				return bar;
+			};
+			foo()
+        ",
+        "
+			var object;
+			React.render(<object.Tag />);
+		",
+        "
+			var object;
+			React.render(<object.tag />);
+		",
+    ];
+
+    let fail = vec![
+        "
+			var App;
+		",
+        r#"
+			var App;
+          	var unused;
+          	React.render(<App unused=""/>);
+		"#,
+        "
+			var App;
+          	var Hello;
+          	React.render(<App:Hello/>);
+		",
+        r#"
+			var Button;
+			var Input;
+			React.render(<Button.Input unused=""/>);
+		"#,
+        "
+			class unused {}
+		",
+        "
+			class HelloMessage {
+				render() {
+					var HelloMessage = <div>Hello</div>;
+					return HelloMessage;
+				}
+			}
+		",
+        "
+			import {Hello} from 'Hello';
+			function Greetings() {
+				const Hello = require('Hello').default;
+				return <Hello />;
+			}
+			Greetings();
+		",
+        "
+			var lowercase;
+          	React.render(<lowercase />);
+		",
+        "
+			function Greetings(div) {
+				return <div />;
+			}
+			Greetings();
+		",
+    ];
+
+    Tester::new(NoUnusedVars::NAME, NoUnusedVars::CATEGORY, pass, fail)
+        .intentionally_allow_no_fix_tests()
+        .with_snapshot_suffix("eslint-plugin-react")
+        .test_and_snapshot();
+}

crates/oxc_linter/src/snapshots/eslint_no_unused_vars@eslint-plugin-react.snap

@@ -0,0 +1,103 @@
+---
+source: crates/oxc_linter/src/tester.rs
+snapshot_kind: text
+---
+  ⚠ eslint(no-unused-vars): Variable 'App' is declared but never used. Unused variables should start with a '_'.
+   ╭─[no_unused_vars.tsx:2:8]
+ 1 │ 
+ 2 │             var App;
+   ·                 ─┬─
+   ·                  ╰── 'App' is declared here
+ 3 │         
+   ╰────
+  help: Consider removing this declaration.
+
+  ⚠ eslint(no-unused-vars): Variable 'unused' is declared but never used. Unused variables should start with a '_'.
+   ╭─[no_unused_vars.tsx:3:16]
+ 2 │             var App;
+ 3 │             var unused;
+   ·                 ───┬──
+   ·                    ╰── 'unused' is declared here
+ 4 │             React.render(<App unused=""/>);
+   ╰────
+  help: Consider removing this declaration.
+
+  ⚠ eslint(no-unused-vars): Variable 'App' is declared but never used. Unused variables should start with a '_'.
+   ╭─[no_unused_vars.tsx:2:8]
+ 1 │ 
+ 2 │             var App;
+   ·                 ─┬─
+   ·                  ╰── 'App' is declared here
+ 3 │             var Hello;
+   ╰────
+  help: Consider removing this declaration.
+
+  ⚠ eslint(no-unused-vars): Variable 'Hello' is declared but never used. Unused variables should start with a '_'.
+   ╭─[no_unused_vars.tsx:3:16]
+ 2 │             var App;
+ 3 │             var Hello;
+   ·                 ──┬──
+   ·                   ╰── 'Hello' is declared here
+ 4 │             React.render(<App:Hello/>);
+   ╰────
+  help: Consider removing this declaration.
+
+  ⚠ eslint(no-unused-vars): Variable 'Input' is declared but never used. Unused variables should start with a '_'.
+   ╭─[no_unused_vars.tsx:3:8]
+ 2 │             var Button;
+ 3 │             var Input;
+   ·                 ──┬──
+   ·                   ╰── 'Input' is declared here
+ 4 │             React.render(<Button.Input unused=""/>);
+   ╰────
+  help: Consider removing this declaration.
+
+  ⚠ eslint(no-unused-vars): Class 'unused' is declared but never used.
+   ╭─[no_unused_vars.tsx:2:10]
+ 1 │ 
+ 2 │             class unused {}
+   ·                   ───┬──
+   ·                      ╰── 'unused' is declared here
+ 3 │         
+   ╰────
+  help: Consider removing this declaration.
+
+  ⚠ eslint(no-unused-vars): Class 'HelloMessage' is declared but never used.
+   ╭─[no_unused_vars.tsx:2:10]
+ 1 │ 
+ 2 │             class HelloMessage {
+   ·                   ──────┬─────
+   ·                         ╰── 'HelloMessage' is declared here
+ 3 │                 render() {
+   ╰────
+  help: Consider removing this declaration.
+
+  ⚠ eslint(no-unused-vars): Identifier 'Hello' is imported but never used.
+   ╭─[no_unused_vars.tsx:2:12]
+ 1 │ 
+ 2 │             import {Hello} from 'Hello';
+   ·                     ──┬──
+   ·                       ╰── 'Hello' is imported here
+ 3 │             function Greetings() {
+   ╰────
+  help: Consider removing this import.
+
+  ⚠ eslint(no-unused-vars): Variable 'lowercase' is declared but never used. Unused variables should start with a '_'.
+   ╭─[no_unused_vars.tsx:2:8]
+ 1 │ 
+ 2 │             var lowercase;
+   ·                 ────┬────
+   ·                     ╰── 'lowercase' is declared here
+ 3 │             React.render(<lowercase />);
+   ╰────
+  help: Consider removing this declaration.
+
+  ⚠ eslint(no-unused-vars): Parameter 'div' is declared but never used. Unused parameters should start with a '_'.
+   ╭─[no_unused_vars.tsx:2:23]
+ 1 │ 
+ 2 │             function Greetings(div) {
+   ·                                ─┬─
+   ·                                 ╰── 'div' is declared here
+ 3 │                 return <div />;
+   ╰────
+  help: Consider removing this parameter.