From 4fa56fb02bc9f7dce572f4647839a8a69afd3419 Mon Sep 17 00:00:00 2001
From: Fernando Belmonte Archetti
 <110430578+farchettiensis@users.noreply.github.com>
Date: Mon, 2 Mar 2026 18:41:46 -0300
Subject: [PATCH] fix(curriculum): improve tests for useState management of
 color input (#65539)

---
 .../67bf4350777ac6ffdc027745.md               | 30 ++++++++++++++++---
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/curriculum/challenges/english/blocks/lab-color-picker/67bf4350777ac6ffdc027745.md b/curriculum/challenges/english/blocks/lab-color-picker/67bf4350777ac6ffdc027745.md
index de7e5527f00..1e5e1376227 100644
--- a/curriculum/challenges/english/blocks/lab-color-picker/67bf4350777ac6ffdc027745.md
+++ b/curriculum/challenges/english/blocks/lab-color-picker/67bf4350777ac6ffdc027745.md
@@ -126,10 +126,32 @@ assert.strictEqual(mostCertainlyAnInput.value, "#ffffff");
 The initial value of your `#color-input` should be managed by your `useState` hook.
 
 ```js
-const declaredState = code.match(/(?:const|let|var)\s*\[\s*(.*)\s*,.*\]\s*=\s*useState/);
-const declaredStateVar = declaredState?.[1];
-const regex = new RegExp(`value\s*=\s*\{\s*${declaredStateVar}\s*}`);
-assert.match(code, regex);
+const abuseState = __helpers.spyOn(React, "useState");
+const script = [...document.querySelectorAll("script")].find((s) => s.dataset.src === "index.jsx").innerText;
+const exports = {};
+const _a = eval(script);
+
+const rendered = await __helpers.prepTestComponent(exports.ColorPicker);
+const inputElement = rendered.querySelector('#color-input');
+assert.exists(inputElement, "Could not find #color-input element");
+
+const initialValue = inputElement.value;
+
+const stateIndex = abuseState.returns.findIndex(([stateValue]) => stateValue === initialValue);
+assert.isAtLeast(stateIndex, 0, "The #color-input value must be managed by a useState hook");
+
+const [, setterFunction] = abuseState.returns[stateIndex];
+
+const newColor = '#123456';
+await React.act(async () => {
+  setterFunction(newColor);
+});
+
+assert.strictEqual(
+  inputElement.value,
+  newColor,
+  "The #color-input value should update when the useState state changes"
+);
 ```
 
 When your `#color-input` value is changed, your `#color-picker-container` should change its background color to reflect that value.