Testing for SVG element in Jest (React-Redux)

You can provide redux stores for each test case with different states. So that the selector will return state slices with different values. This allows you to test different branches of code that use these variables.

E.g.

User.jsx:

import React from 'react';
import { useSelector } from 'react-redux';

const selectUsername = (state) => state.user.name;
const selectAuthState = (state) => state.auth;

export const User = () => {
  const userID = useSelector(selectUsername);
  const authState = useSelector(selectAuthState);
  const { isLoading } = useSelector((state) => state.user);

  const handleAuth = (e) => {
    e.preventDefault();
  };

  if (isLoading) {
    return (
      <svg className="spinner" viewBox="0 0 50 50">
        <circle className="path" cx="25" cy="25" r="20" fill="none" strokeWidth="5"></circle>
      </svg>
    );
  } else if (authState) {
    return (
      <a
        id="reddit-username"
        target="_blank"
        rel="noreferrer"
        href={`https://www.reddit.com/user/${userID}`}
        aria-label="Current user ID"
      >
        {userID}
      </a>
    );
  } else {
    return (
      <a id="reddit-username" href="/" onClick={handleAuth} aria-label="Connect the web app with your Reddit account">
        Link with Reddit
      </a>
    );
  }
};

User.test.jsx:

import { User } from './User';
import React from 'react';
import { render } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import { Provider } from 'react-redux';
import { combineReducers, createStore } from 'redux';

function renderUI(reducers) {
  const rootReducer = combineReducers(reducers);
  const store = createStore(rootReducer);
  return render(
    <Provider store={store}>
      <User />
    </Provider>
  );
}

describe('70249367', () => {
  test('should render spinner', () => {
    const { container } = renderUI({
      user: (state = { name: '', isLoading: true }) => {
        return state;
      },
    });
    expect(container.querySelector('.spinner')).toBeInTheDocument();
  });

  test("renders 'Link with Reddit' link by default", () => {
    const { getByText } = renderUI({
      user: (state = { name: '', isLoading: false }) => {
        return state;
      },
    });
    expect(getByText('Link with Reddit')).toBeInTheDocument();
  });

  test('should render username', () => {
    const { getByText } = renderUI({
      user: (state = { name: 'teresa teng', isLoading: false }) => {
        return state;
      },
      auth: (state = {}) => state,
    });
    expect(getByText('teresa teng')).toBeInTheDocument();
  });
});

Test result:

 PASS  examples/70249367/User.test.jsx (8.809 s)
  70249367
    ✓ should render spinner (27 ms)
    ✓ renders 'Link with Reddit' link by default (7 ms)
    ✓ should render username (3 ms)

----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------|---------|----------|---------|---------|-------------------
All files |   94.74 |      100 |      80 |   93.33 |                   
 User.jsx |   94.74 |      100 |      80 |   93.33 | 13                
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        9.405 s

package versions:

"@testing-library/jest-dom": "^5.11.6",
"@testing-library/react": "^11.2.2",
"jest": "^26.6.3",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-redux": "^7.2.2",
"redux": "^4.1.0",