The test execution in Azure Dev Ops using react-scripts seems to be stuck indefinitely

Having trouble getting my React app's tests to stop running in Azure Dev Ops after they finish. The pipeline just hangs indefinitely while the tests have already completed. This is a simple create-react-app with a few tests included. Here is the YAML for my pipeline:

trigger: none

pool:
  vmImage: 'ubuntu-latest'

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '10.x'
  displayName: 'Install Node.js'

- script: |
    npm install
    npm run build
  displayName: 'npm install and build'

- script: npm run citest

- task: PublishPipelineArtifact@0
  inputs:
    artifactName: 'react'
    targetPath: './build'

Originally used "- script: npm test" for testing, but I followed instructions on Facebook's GitHub page to create a new test script called "citest": 

set CI=true && react-scripts test a
. However, the issue persists and the task continues to run endlessly. The console output in Dev Ops shows that the tests have passed:

> set CI=true && react-scripts test a
PASS src/components/landing/landing.test.js (6.008s)
PASS src/components/navbar/NavBar.test.js
PASS src/components/app/App.test.js
Test Suites: 3 passed, 3 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        7.573s
Ran all test suites matching /a/i.

Looking for any suggestions or solutions to resolve this issue - appreciate any help!

reactjsazure-devopsyamlazure-pipelines

Answer №1

Revise the code by following this: 

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "citest":"CI=true react-scripts test"
  },

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

ES5 enables the extension of classes in React

This ES6 syntax works fine for me: import {Component} from 'react'; class A extends Component {} class B extends A { // I can redeclare some methods here } But how would one implement this using ES5? Like so: var React = require('reac ...

javascriptclassinheritancereactjs

Utilizing the power of Material-UI with React in conjunction with Python-Django: A comprehensive

I am seeking guidance on implementing React with Material UI components in my web application. The technologies I have utilized in multiple projects include: Materialize CSS, Javascript, Jquery. The technologies I wish to explore for future projects are ...

javascriptpythondjangoreactjsmaterial-ui

Tips for featuring the latest blog post at the top of a NextJS blog

I have a website built on Next JS with a blog page. The setup is correct, where the /blog page displays content based on slugs. Currently, new blog posts are appearing at the bottom of the page, under older ones. I want to reverse this so that when a new p ...

javascriptreactjsnext.jsblogs

Refreshing the page in Next.js causes issues with the CSS classNames

I am currently in the process of migrating a React SPA to Next.js, and I am relatively new to this framework. The issue I am encountering is that when I initially load the Home page, everything appears as expected. However, if I refresh the page, incorrect ...

javascriptcssreactjsnext.jscss-modules

Issues with Date Format in Material UI DatePicker Component in React

I am encountering an issue with the Material UI DatePicker component in my React project. Even though I have set the date format to "dd/MM/yyyy", the DatePicker is showing dates in the "MM/DD/yyyy" format. Here is the CustomDatePicker Component code: impor ...

reactjsmaterial-uidatepickerdate-fns

Ways to attach an event listener to a useRef hook within a useEffect hook

As I work on creating a custom hook, I am faced with the task of adding an event listener to a ref. However, I am uncertain about how to properly handle cleaning up the event listener since both listRef and listRef.current may potentially be null: const ...

reactjstypescriptreact-hooks

Create a stunning MUI App bar with a blurred effect below a fixed Navbar

Is there a method to apply a blur effect to the background of my material-ui AppBar component, creating a visually appealing overlay below the fixed navbar? I have experimented with using filter: blur(0) but it does not achieve the desired result. I am lo ...

javascriptcssreactjsmaterial-uistyled-components

Utilize Material UI and React JS to showcase specific row data in a different component

I am encountering an issue with retrieving data from a Data Grid (or XGrid) to showcase in another component on the page. In the code provided below, you can observe that I am fetching data from a local database and displaying it in a Data Grid. My object ...

reactjsmaterial-ui

Is it possible to invoke a React JS class using an onClick event handler within a different Component?

I am struggling with some code that resembles the following: import React from "react"; import Overlay from "./Overlay"; export default class TagListItem extends React.Component { render() { return( <div cla ...

reactjsonclick

Display a universal loading screen on all React.js pages when making calls from various locations

As I was working on adding a global loading screen for data fetched from an API, I came across this helpful answer and decided to implement something similar. LoadingProvider.js import { createContext, useContext, useState } from "react"; const ...

reactjsreact-hooksnext.js

Using React in tandem with superagent, you can update the state of an application by

Whenever I attempt to modify the state of a component, an error occurs. The following error is generated: Uncaught TypeError: Cannot read property 'setState' of undefined constructor(props){ super(props); this.state={ r:&apo ...

reactjssuperagent

When utilizing react-query to submit data, clicking a button will result in receiving an undefined value

My goal is to capture a user's input and forward it to another page upon clicking a button and submitting the form data, all while utilizing react-query. The form on the page consists of three inputs: username, email, and password. I intend to submit ...

reactjsnext.jsreact-query

When attempting to retrieve data saved to req.session with express-session from a different endpoint, the data appears to be

While working on my project with express-session, I encountered a peculiar issue. I am saving the currently logged in user to the session, but when I try to access the currentUser key on the get route, I find that the value is an empty object. Strangely, i ...

javascriptnode.jsreactjsexpressauthentication

Deselect Radio buttons using Material UI

Is there a way to implement the functionality of unchecking radio buttons? For instance, when clicking on a radio button it gets checked, but if another field is clicked, that field gets checked instead. However, if a field that is already checked is cli ...

reactjsradio-buttonmaterial-ui

Tips for linking React interface to Flask backend address in a live deployment environment?

I have set up a Flask backend that is deployed at backend.herokuapp.com/test. Currently, I am working on connecting my React frontend (frontend.herokuapp.com) to this backend: useEffect(() => { fetch("/test", { headers: { "Content- ...

reactjsflaskherokuurlfetch

Troubleshooting the Hover Effect of Buttons in Next.js when Using Tailwind CSS for Dynamic Color Changes

Encountering a problem with button hover functionality in a Next.js component using Tailwind CSS. The objective is to alter the button's background color dynamically on hover based on a color value stored in the component's state. This code func ...

javascriptreactjstypescriptnext.jstailwind-css

Confused about the concept of an SWR subscription

As I navigate through SWR's various features, there is one that has caught my attention: SWR-subscription. The concept of "subscribing to real-time data sources with SWR" is unfamiliar to me and I am seeking an explanation along with a straightforward ...

javascriptreactjsnext.jssubscriptionswr

What is the best method for arranging drop-down menu options in alphabetical order?

Is there a way to organize the options alphabetically in the dropdown menu of Material-UI? I understand that arrays can be sorted easily using arr.sort(). However, when I try const options = [...].sort(), I still see unsorted values in the dropdown menu. ...

javascriptreactjsmaterial-ui

Tips for managing Material-ui's <Autocomplete/> component based on the option's id

When dealing with HTML select in React, it's common to use an id or key to keep track of the selected value: <select value={value} onChange={(event) => setValue(event.target.value)}> {options.map((option) => ( <option value={optio ...

javascriptreactjsmaterial-ui

Struggling with declaring generic types in TypeScript can be a challenge

Struggling with declaring the type while creating a hook named useUpdate, here's the code: type CallBack<T extends readonly any[]> = ( ...args: T ) => void | (() => void | undefined); function useUpdate<T extends readonly any[]>( ...

reactjstypescriptreact-hooks