(Blog) Testing a Redux hooked app

App--Comp.jsx

// App.js
function App() {
  const stateAPIStatus = useLoadFoodData();

  return (
    <div className="food-app">
      <header>
        <h1>Ordux</h1>
      </header>
      <Message status={stateAPIStatus} />
    </div>
  );
}

// Comps.js
function Message(props) {
  const { status } = props;

  const messages = {
    loading: 'Loading...',
    error: (
      <>
        Menu failed to load.
        <br />
        Please try again...
      </>
    ),
  };

  const messageText = messages[status];

  if (!messageText) {
    return null;
  }

  return (
    <div
      className={`message-${status}`}
      role={status === 'error' ? 'alert' : 'status'}
      aria-live="polite"
      aria-busy={status === 'loading'}
    >
      {messageText}
    </div>
  );
}