fix(curriculum): improve tests for useState management of color input (#65539)

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.