add timeouts to fixture

Author: gingerbenw

test/browser/features/component-lifecycle-spans.feature

@@ -2,16 +2,13 @@
 Feature: Component lifecycle spans
     Scenario: Component lifecycle spans are automatically instrumented
         Given I navigate to the test URL "/docs/react"
-        And I click the element "update-component"
-        Then I click the element "unmount-component"
-        Then I click the element "end-page-load"
         When I wait to receive 1 trace
         Then a span name equals "[ViewLoad/Component]Component"
         And a span name equals "[ViewLoadPhase/Mount]Component"
         And a span name equals "[ViewLoadPhase/Update]Component"
         And a span name equals "[ViewLoadPhase/Unmount]Component"
         # [ViewLoadPhase/Update]Component attributes
-        And the trace payload field "resourceSpans.0.scopeSpans.0.spans.1" string array attribute "bugsnag.component.update.props" equals the array:
+        And the trace payload field "resourceSpans.0.scopeSpans.0.spans.2" string array attribute "bugsnag.component.update.props" equals the array:
             | count |
 
     @skip

test/browser/features/fixtures/packages/react/src/index.jsx

@@ -43,18 +43,25 @@ const KeepAlive = () => {
 }
 
 const Root = () => {
-  const [show, setShow] = React.useState(true)
+  const [show, setShow] = React.useState(false)
   const [count, setCount] = React.useState(0)
 
+  useEffect(() => {
+    (async () => {
+      await new Promise(resolve => setTimeout(resolve, 100))
+      setShow(true)
+      await new Promise(resolve => setTimeout(resolve, 100))
+      setCount(n => n + 1)
+      await new Promise(resolve => setTimeout(resolve, 100))
+      setShow(false)
+      await new Promise(resolve => setTimeout(resolve, 100))
+      document.getElementById("end-page-load").click()
+    })()
+  }, [])
+
   return (
     <div>
      <KeepAlive />
-      <button id="update-component" onClick={() => setCount(prevCount => prevCount + 1)}>
-        Increment
-      </button>
-      <button id="unmount-component" onClick={() => { setShow(false) }}>
-        Unmount Component
-      </button>
       {show && <WrappedComponent count={count} />}
     </div>
   )