Fixtures from ESLint rule

Incorporates the fixtures from eslint-plugin-react-hooks using a script, so that we can easily update them in the future. For each fixture we run the compiler with and without hooks validation first so that we know if the fixture is expected to pass — we have some false positives and false negatives that i can work through. For example we accidentally think that `userFetch()` is a hook, oops. Fixtures that should pass but error, or that should error but pass, are marked as `todo.<name>` or `todo.error.<name>`. While i was here i added the ability to have fixtures in subdirectories for grouping purposes.
2025-11-01 09:12:30 +00:00 · 2023-05-11 13:39:58 -06:00
parent d1e044b81a
commit e649bf6429
66 changed files with 148 additions and 52 deletions
@@ -71,14 +71,15 @@ for (const fixture of fixtures) {
  let code = fixture.code;
  let prefix = "";
  if (error !== null) {
-    prefix = `todo.`;
+    prefix = `todo.bail.`;
    code = `// @skip\n// Unsupported input\n${code}`;
  } else if (fixture.valid === false) {
-    prefix = `error.`;
    if (passes) {
-      // oops, passed when we expected an error
-      prefix = `todo.error.`;
-      code = `// @skip\n// Passed but should have errored\n${code}`;
+      prefix = `todo.error.invalid-`;
+      code = `// @skip\n// Passed but should have failed\n${code}`;
+    } else {
+      prefix = `error.invalid-`;
+      code = `// Expected to fail\n${code}`;
    }
  } else if (!passes) {
    // oops, error when it should have passed
@@ -2,6 +2,8 @@
 ## Input

 ```javascript
+// Expected to fail
+
 // Invalid because it's dangerous and might not warn otherwise.
 // This *must* be invalid.
 function useHookInLoops() {
@@ -23,13 +25,13 @@ function useHookInLoops() {
 ## Error

 ```
-[ReactForget] InvalidInput: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) (5:5)
-
 [ReactForget] InvalidInput: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) (7:7)

-[ReactForget] InvalidInput: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) (10:10)
+[ReactForget] InvalidInput: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) (9:9)

 [ReactForget] InvalidInput: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) (12:12)
+
+[ReactForget] InvalidInput: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) (14:14)
 ```
          
      
@@ -1,3 +1,5 @@
+// Expected to fail
+
 // Invalid because it's dangerous and might not warn otherwise.
 // This *must* be invalid.
 function useHookInLoops() {
@@ -2,6 +2,8 @@
 ## Input

 ```javascript
+// Expected to fail
+
 // Invalid because it's dangerous and might not warn otherwise.
 // This *must* be invalid.
 function ComponentWithConditionalHook() {
@@ -16,7 +18,7 @@ function ComponentWithConditionalHook() {
 ## Error

 ```
-[ReactForget] InvalidInput: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) (5:5)
+[ReactForget] InvalidInput: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) (7:7)
 ```
          
      
@@ -1,3 +1,5 @@
+// Expected to fail
+
 // Invalid because it's dangerous and might not warn otherwise.
 // This *must* be invalid.
 function ComponentWithConditionalHook() {
@@ -2,6 +2,8 @@
 ## Input

 ```javascript
+// Expected to fail
+
 // Invalid because it's dangerous and might not warn otherwise.
 // This *must* be invalid.
 function useLabeledBlock() {
@@ -17,7 +19,7 @@ function useLabeledBlock() {
 ## Error

 ```
-[ReactForget] InvalidInput: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) (6:6)
+[ReactForget] InvalidInput: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) (8:8)
 ```
          
      
@@ -1,3 +1,5 @@
+// Expected to fail
+
 // Invalid because it's dangerous and might not warn otherwise.
 // This *must* be invalid.
 function useLabeledBlock() {
@@ -2,6 +2,8 @@
 ## Input

 ```javascript
+// Expected to fail
+
 // Invalid because it's dangerous and might not warn otherwise.
 // This *must* be invalid.
 function ComponentWithHookInsideLoop() {
@@ -16,7 +18,7 @@ function ComponentWithHookInsideLoop() {
 ## Error

 ```
-[ReactForget] InvalidInput: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) (5:5)
+[ReactForget] InvalidInput: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) (7:7)
 ```
          
      
@@ -1,3 +1,5 @@
+// Expected to fail
+
 // Invalid because it's dangerous and might not warn otherwise.
 // This *must* be invalid.
 function ComponentWithHookInsideLoop() {
@@ -2,6 +2,8 @@
 ## Input

 ```javascript
+// Expected to fail
+
 // Invalid because it's dangerous and might not warn otherwise.
 // This *must* be invalid.
 function useHook() {
@@ -20,7 +22,7 @@ function useHook() {
 ## Error

 ```
-[ReactForget] InvalidInput: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) (10:10)
+[ReactForget] InvalidInput: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) (12:12)
 ```
          
      
@@ -1,11 +1,13 @@
+// Expected to fail
+
 // Invalid because it's dangerous and might not warn otherwise.
 // This *must* be invalid.
 function useHook() {
+  if (a) return;
  if (b) {
    console.log("true");
  } else {
    console.log("false");
  }
-  if (a) return;
  useState();
 }
@@ -2,6 +2,8 @@
 ## Input

 ```javascript
+// Expected to fail
+
 // Invalid because it's dangerous and might not warn otherwise.
 // This *must* be invalid.
 function useHook() {
@@ -15,9 +17,9 @@ function useHook() {
 ## Error

 ```
-[ReactForget] InvalidInput: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) (4:4)
+[ReactForget] InvalidInput: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) (6:6)

-[ReactForget] InvalidInput: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) (5:5)
+[ReactForget] InvalidInput: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) (7:7)
 ```
          
      
@@ -1,3 +1,5 @@
+// Expected to fail
+
 // Invalid because it's dangerous and might not warn otherwise.
 // This *must* be invalid.
 function useHook() {
@@ -2,6 +2,8 @@
 ## Input

 ```javascript
+// Expected to fail
+
 // Invalid because it's dangerous and might not warn otherwise.
 // This *must* be invalid.
 function ComponentWithTernaryHook() {
@@ -14,7 +16,7 @@ function ComponentWithTernaryHook() {
 ## Error

 ```
-[ReactForget] InvalidInput: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) (4:4)
+[ReactForget] InvalidInput: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) (6:6)
 ```
          
      
@@ -1,3 +1,5 @@
+// Expected to fail
+
 // Invalid because it's dangerous and might not warn otherwise.
 // This *must* be invalid.
 function ComponentWithTernaryHook() {
@@ -2,6 +2,8 @@
 ## Input

 ```javascript
+// Expected to fail
+
 // Invalid because it's dangerous and might not warn otherwise.
 // This *must* be invalid.
 function useHook() {
@@ -15,7 +17,7 @@ function useHook() {
 ## Error

 ```
-[ReactForget] InvalidInput: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) (5:5)
+[ReactForget] InvalidInput: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) (7:7)
 ```
          
      
@@ -1,3 +1,5 @@
+// Expected to fail
+
 // Invalid because it's dangerous and might not warn otherwise.
 // This *must* be invalid.
 function useHook() {
@@ -2,6 +2,8 @@
 ## Input

 ```javascript
+// Expected to fail
+
 // Invalid because it's dangerous and might not warn otherwise.
 // This *must* be invalid.
 function normalFunctionWithConditionalHook() {
@@ -16,7 +18,7 @@ function normalFunctionWithConditionalHook() {
 ## Error

 ```
-[ReactForget] InvalidInput: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) (5:5)
+[ReactForget] InvalidInput: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) (7:7)
 ```
          
      
@@ -1,3 +1,5 @@
+// Expected to fail
+
 // Invalid because it's dangerous and might not warn otherwise.
 // This *must* be invalid.
 function normalFunctionWithConditionalHook() {
@@ -2,6 +2,8 @@
 ## Input

 ```javascript
+// Expected to fail
+
 // Invalid because it's dangerous and might not warn otherwise.
 // This *must* be invalid.
 function useHookInLoops() {
@@ -18,9 +20,9 @@ function useHookInLoops() {
 ## Error

 ```
-[ReactForget] InvalidInput: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) (5:5)
-
 [ReactForget] InvalidInput: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) (7:7)
+
+[ReactForget] InvalidInput: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) (9:9)
 ```
          
      
@@ -1,3 +1,5 @@
+// Expected to fail
+
 // Invalid because it's dangerous and might not warn otherwise.
 // This *must* be invalid.
 function useHookInLoops() {
@@ -2,6 +2,8 @@
 ## Input

 ```javascript
+// Expected to fail
+
 // Invalid because it's dangerous and might not warn otherwise.
 // This *must* be invalid.
 function useHookWithConditionalHook() {
@@ -16,7 +18,7 @@ function useHookWithConditionalHook() {
 ## Error

 ```
-[ReactForget] InvalidInput: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) (5:5)
+[ReactForget] InvalidInput: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) (7:7)
 ```
          
      
@@ -1,3 +1,5 @@
+// Expected to fail
+
 // Invalid because it's dangerous and might not warn otherwise.
 // This *must* be invalid.
 function useHookWithConditionalHook() {
@@ -2,6 +2,8 @@
 ## Input

 ```javascript
+// Expected to fail
+
 // Invalid because it's dangerous and might not warn otherwise.
 // This *must* be invalid.
 function useHook() {
@@ -20,7 +22,7 @@ function useHook() {
 ## Error

 ```
-[ReactForget] InvalidInput: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) (10:10)
+[ReactForget] InvalidInput: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) (12:12)
 ```
          
      
@@ -1,11 +1,13 @@
+// Expected to fail
+
 // Invalid because it's dangerous and might not warn otherwise.
 // This *must* be invalid.
 function useHook() {
-  if (a) return;
  if (b) {
    console.log("true");
  } else {
    console.log("false");
  }
+  if (a) return;
  useState();
 }
@@ -0,0 +1,28 @@
+
+## Input
+
+```javascript
+// Expected to fail
+
+// Invalid because it's dangerous and might not warn otherwise.
+// This *must* be invalid.
+function useHook({ bar }) {
+  let foo1 = bar && useState();
+  let foo2 = bar || useState();
+  let foo3 = bar ?? useState();
+}
+
+```
+
+
+## Error
+
+```
+[ReactForget] InvalidInput: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) (6:6)
+
+[ReactForget] InvalidInput: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) (7:7)
+
+[ReactForget] InvalidInput: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning) (8:8)
+```
+          
+      
@@ -1,5 +1,4 @@
-// @skip
-// Unsupported input
+// Expected to fail

 // Invalid because it's dangerous and might not warn otherwise.
 // This *must* be invalid.
@@ -0,0 +1,23 @@
+
+## Input
+
+```javascript
+// Regression test for incorrectly flagged valid code.
+function RegressionTest() {
+  const foo = cond ? a : b;
+  useState();
+}
+
+```
+
+## Code
+
+```javascript
+// Regression test for incorrectly flagged valid code.
+function RegressionTest() {
+  cond ? a : b;
+  useState();
+}
+
+```
+      
@@ -1,6 +1,3 @@
-// @skip
-// Unsupported input
-
 // Regression test for incorrectly flagged valid code.
 function RegressionTest() {
  const foo = cond ? a : b;
@@ -1,5 +1,5 @@
 // @skip
-// Passed but should have errored
+// Passed but should have failed

 // Invalid because it's dangerous and might not warn otherwise.
 // This *must* be invalid.
@@ -1,5 +1,5 @@
 // @skip
-// Passed but should have errored
+// Passed but should have failed

 // Invalid because it's a common misunderstanding.
 // We *could* make it valid but the runtime error could be confusing.
@@ -1,5 +1,5 @@
 // @skip
-// Passed but should have errored
+// Passed but should have failed

 // Invalid because it's dangerous.
 // Normally, this would crash, but not if you use inline requires.
@@ -1,5 +1,5 @@
 // @skip
-// Passed but should have errored
+// Passed but should have failed

 // This is a false positive (it's valid) that unfortunately
 // we cannot avoid. Prefer to rename it to not start with "use"
@@ -1,5 +1,5 @@
 // @skip
-// Passed but should have errored
+// Passed but should have failed

 // Technically this is a false positive.
 // We *could* make it valid (and it used to be).
@@ -1,5 +1,5 @@
 // @skip
-// Passed but should have errored
+// Passed but should have failed

 (class {
  useHook() {
@@ -1,5 +1,5 @@
 // @skip
-// Passed but should have errored
+// Passed but should have failed

 // Invalid because it's dangerous and might not warn otherwise.
 // This *must* be invalid.
@@ -1,5 +1,5 @@
 // @skip
-// Passed but should have errored
+// Passed but should have failed

 // Invalid because it's a common misunderstanding.
 // We *could* make it valid but the runtime error could be confusing.
@@ -1,5 +1,5 @@
 // @skip
-// Passed but should have errored
+// Passed but should have failed

 // These are neither functions nor hooks.
 function _normalFunctionWithHook() {
@@ -1,5 +1,5 @@
 // @skip
-// Passed but should have errored
+// Passed but should have failed

 // Invalid because it's a common misunderstanding.
 // We *could* make it valid but the runtime error could be confusing.
@@ -1,5 +1,5 @@
 // @skip
-// Passed but should have errored
+// Passed but should have failed

 class ClassComponentWithHook extends React.Component {
  render() {
@@ -1,5 +1,5 @@
 // @skip
-// Passed but should have errored
+// Passed but should have failed

 // Invalid because it's dangerous and might not warn otherwise.
 // This *must* be invalid.
@@ -1,5 +1,5 @@
 // @skip
-// Passed but should have errored
+// Passed but should have failed

 class ClassComponentWithFeatureFlag extends React.Component {
  render() {
@@ -1,5 +1,5 @@
 // @skip
-// Passed but should have errored
+// Passed but should have failed

 (class {
  h = () => {
@@ -1,5 +1,5 @@
 // @skip
-// Passed but should have errored
+// Passed but should have failed

 // Invalid because it's dangerous and might not warn otherwise.
 // This *must* be invalid.
@@ -1,5 +1,5 @@
 // @skip
-// Passed but should have errored
+// Passed but should have failed

 // This is invalid because "use"-prefixed functions used in named
 // functions are assumed to be hooks.
@@ -1,5 +1,5 @@
 // @skip
-// Passed but should have errored
+// Passed but should have failed

 class C {
  m() {
@@ -1,5 +1,5 @@
 // @skip
-// Passed but should have errored
+// Passed but should have failed

 // Currently invalid because it violates the convention and removes the "taint"
 // from a hook. We *could* make it valid to avoid some false positives but let's
@@ -1,5 +1,5 @@
 // @skip
-// Passed but should have errored
+// Passed but should have failed

 // Invalid because it's dangerous and might not warn otherwise.
 // This *must* be invalid.
@@ -1,5 +1,5 @@
 // @skip
-// Passed but should have errored
+// Passed but should have failed

 // Invalid because it's a common misunderstanding.
 // We *could* make it valid but the runtime error could be confusing.
@@ -1,5 +1,5 @@
 // @skip
-// Passed but should have errored
+// Passed but should have failed

 (class {
  i() {
@@ -1,5 +1,5 @@
 // @skip
-// Passed but should have errored
+// Passed but should have failed

 // Invalid because it's dangerous and might not warn otherwise.
 // This *must* be invalid.
@@ -1,5 +1,5 @@
 // @skip
-// Passed but should have errored
+// Passed but should have failed

 (class {
  useHook = () => {
@@ -1,5 +1,5 @@
 // @skip
-// Passed but should have errored
+// Passed but should have failed

 Hook.useState();
 Hook._useState();