15

私はまだ Enzyme テストを react-testing-library に移行する過程にあり、コンポーネントがマウントされると、データを取得するために Ajax リクエストが開始されるというかなり一般的なシナリオがあります。フェッチが開始される直前に、ロード中であることを示す状態値が設定され、スピナーがレンダリングされます。完了すると、両方のデータで状態が更新され、必要に応じて "loadingState" が "Completed" または "Failed" に設定されます。

import React, { useEffect, useState } from "react";
import { SwapSpinner } from "react-spinners-kit";
import styled from "styled-components";
import * as R from "ramda";

import { getPeople } from "./getPeople";

const FlexCenter = styled.div`
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
`;

const loadingStates = {
  notStarted: "notStarted",
  isLoading: "isLoading",
  success: "success",
  failure: "failure"
};

function App() {
  const [people, setPeople] = useState([]);
  const [isLoading, setLoading] = useState(loadingStates.notStarted);

  useEffect(() => {
    setLoading(loadingStates.isLoading);
    getPeople()
      .then(({ results }) => {
        setPeople(results);
        setLoading(loadingStates.success);
      })
      .catch(error => {
        setLoading(loadingStates.failure);
      });
  }, []);

  return (
    <div>
      {R.cond([
        [
          R.equals(loadingStates.isLoading),
          () => (
            <FlexCenter data-testid="spinner">
              <SwapSpinner />
            </FlexCenter>
          )
        ],
        [
          R.equals(loadingStates.success),
          () => (
            <ul data-testid="people-list">
              {people.map(({ name }) => (
                <li key={name}>{name}</li>
              ))}
            </ul>
          )
        ],
        [R.equals(loadingStates.failure), <div>An error occured</div>]
      ])(isLoading)}
    </div>
  );
}

export default App;

Enzyme を使用すると、状態をキーのいずれかに手動で設定loadingStatesし、レンダリング条件が適切な変更をレンダリングすることをアサートできます。

RTLでこれを行う方法はありますか?

4

1 に答える 1