(Blog) Testing a Redux hooked app

test-loading.js

import React from 'react';
import { Provider } from 'react-redux';
import { render, screen, waitForElementToBeRemoved } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';

import App from './App';
import { createReduxStore } from './redux';

describe('Test App', () => {
  function renderApp(store = createReduxStore(), props = {}) {
    return render(
      <Provider store={store}>
        <App {...props} />
      </Provider>,
    );
  }

  test('show loading indicator till API responds', async () => {
    renderApp();

    // during loading, show app name and loading indicator
    expect(screen.getByRole('heading')).toHaveTextContent('Ordux');
    expect(screen.getByRole('status')).toHaveTextContent('Loading...');
    
    await waitForElementToBeRemoved(() => screen.getByText(/Loading/i));
  });
});