Pomodoro Clock can't get last test case to pass even though app functions percectly

Hi everyone, hoping someone can help me. Not sure if there’s a problem with my code or a problem with the FCC test suite. Anyways, my app functions perfectly but for some reason when the test case runs to check if the audio plays @ timer = 00:00 the audio will not play. It plays every single other time except for when that test case runs. I’ve tried everything I can think of, so I’m hoping someone can point me in the right direction. Thanks!

const Increment = props => {
  return (  
    <i 
      id={props.incId} 
      onClick={props.onClick} 
      class="fas fa-caret-up fa-lg">
    </i>
  );
}

const Decrement = props => {
  return (
    <i 
      id={props.decId}
      onClick={props.onClick}
      class="fas fa-caret-down fa-lg">
    </i>
  );
}

class SetTimer extends React.Component {
  render() {
    return (
      <div id={this.props.areaId}>
        <h3 id={this.props.headerId}>
          {this.props.headerContent}
        </h3>
        <Increment 
          onClick={this.props.onIncClick}
          incId={this.props.incId}/>
        <h4 id={this.props.contentId}>
          {this.props.min}
        </h4>
        <Decrement
          onClick={this.props.onDecClick}
          decId={this.props.decId}/>
      </div>
    );
  }
}
const Button = props => {
  return (
    <i
      id={props.buttonId}
      className={props.className}
      onClick={props.onClick}>
    </i>  
  );
}
class Timer extends React.Component {
  render() {
    return (
      <div id={this.props.areaId}>
        <h3 id={this.props.headerId}>
          {this.props.headerContent}
        </h3>
        <h4 id={this.props.contentId}>
          {this.props.min > 9 ? this.props.min : "0" + this.props.min}
          :
          {this.props.sec > 9 ? this.props.sec : "0" + this.props.sec}
        </h4>
        <Button 
          buttonId={this.props.startButtonId}
          className={this.props.startButtonIcon}
          onClick={this.props.onStartClick}/>
        <Button
          buttonId={this.props.restartButtonId}
          className={this.props.restartButtonIcon}
          onClick={this.props.onRestartClick}/>
      </div>
    );
  }
}
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      timerType: "Session",
      breakMin: 5,
      sessionMin: 25,
      play: false,
      timer: 1500,
    }
    this.handleSessionIncClick = this.handleSessionIncClick.bind(this);
    this.handleSessionDecClick = this.handleSessionDecClick.bind(this);
    this.handleBreakIncClick = this.handleBreakIncClick.bind(this);
    this.handleBreakDecClick = this.handleBreakDecClick.bind(this);
    this.handleStartClick = this.handleStartClick.bind(this);
    this.handleRestartClick = this.handleRestartClick.bind(this);
  }
  componentDidMount() {
    this.timer = setInterval(() => {
      let newTimer = this.state.timer - 1;
      if (this.state.play) {
        if (newTimer > -1) {
          this.setState({
            timer: newTimer
          });
        } else if (this.state.timer === 0) {
          this.audioBeep.play();
          if (this.state.timerType === "Session") {
            this.setState({
              timerType: "Break",
              timer: this.state.breakMin * 60,
            });
          } else if (this.state.timerType === "Break") { 
            this.setState({
              timerType: "Session",
              timer: this.state.sessionMin * 60,
            });
          }
        }
      }
    }, 1000);
  }
  componentWillUnmount() {
     clearInterval(this.timer);
  }
  handleSessionIncClick() {
    if (this.state.sessionMin < 60) {
      if (this.state.timerType === "Session") {
        this.setState({
          sessionMin: this.state.sessionMin += 1,
          timer: this.state.timer += 60
        });
      } else if (this.state.timerType === "Break" && !this.state.play) {
        this.setState({
          sessionMin: this.state.sessionMin += 1,
        });
      }
    }
  }
  handleSessionDecClick() {
    if (this.state.sessionMin > 1) {
      if (this.state.timerType === "Session") {
        this.setState({
          sessionMin: this.state.sessionMin -= 1,
          timer: this.state.timer -= 60,
        });
      } else if (this.state.timerType = "Break" && !this.state.play) {
        this.setState({
          sessionMin: this.state.sessionMin -= 1,
        });
      }
    }
  }
  handleBreakIncClick() {
    if (this.state.breakMin < 60) {
      if (this.state.timerType === "Break") {
        this.setState({
          breakMin: this.state.breakMin += 1,
          timer: this.state.timer += 60,
        });
      } else if (this.state.timerType === "Session" && !this.state.play) {
        this.setState({
          breakMin: this.state.breakMin += 1,
        });
      }
    }
  }
  handleBreakDecClick() {
    if (this.state.breakMin > 1) {
      if (this.state.timerType === "Break") {
        this.setState({
          breakMin: this.state.breakMin -= 1,
          timer: this.state.timer -= 60,
        });
      } else if (this.state.timerType === "Session" && !this.state.play) {
        this.setState({
          breakMin: this.state.breakMin -= 1,
        });
      }
    }
  }
  handleStartClick() { 
    this.setState({
      play: !this.state.play
    });
  }
  handleRestartClick() {
    this.setState({
      timerType: "Session",
      breakMin: 5,
      sessionMin: 25,
      play: false,
      timer: 1500
    });
    this.audioBeep.pause();
    this.audioBeep.currentTime = 0;
  }
  render() {
    return (
      <div id="body">
        <SetTimer 
          areaId="set-break-time"
          headerId="break-label"
          headerContent="Break Length"
          contentId="break-length"
          min={this.state.breakMin}
          incId="break-increment"
          decId="break-decrement"
          onIncClick={this.handleBreakIncClick}
          onDecClick={this.handleBreakDecClick}/>
        <SetTimer
          areaId="set-session-time"
          headerId="session-label"
          headerContent="Session Length"
          contentId="session-length"
          min={this.state.sessionMin}
          incId="session-increment"
          decId="session-decrement"
          onIncClick={this.handleSessionIncClick}
          onDecClick={this.handleSessionDecClick}/>
        <Timer 
          areaId="timer-area"
          headerId="timer-label"
          headerContent={this.state.timerType}
          contentId="time-left"
          min={Math.floor(this.state.timer / 60)}
          sec={this.state.timer - (Math.floor(this.state.timer / 60) * 60)}
          startButtonId="start_stop"
          startButtonIcon="fas fa-stopwatch fa-2x"
          onStartClick={this.handleStartClick}
          restartButtonId="reset"
          restartButtonIcon="fas fa-sync fa-2x"
          onRestartClick={this.handleRestartClick}/>
        <audio id="beep" preload="auto" 
          src="https://goo.gl/65cBl1"
          ref={(audio) => { this.audioBeep = audio; }} />
      </div>
    );
  }
}
ReactDOM.render(
  <App />,
  document.getElementById('app')
);

Hey there.

In your handleRestartClick() function try replacing this.audioBeep.pause() with this.audioBeep.load()

I’m on the same project, although using plain JS, but load() seemed to do the trick for me.