Test Test Diye Nice Nice: Mocklama (4) - React

Enes Başpınar /01 Ara 2022

20 min read •––– views

Bölümler

Test Test Diye Nice Nice: Mocklama (1) - Fonksiyon
Test Test Diye Nice Nice: Mocklama (2) - Modül
Test Test Diye Nice Nice: Mocklama (3) - Timer
Test Test Diye Nice Nice: Mocklama (4) - React (Şu anda buradasınız)

kaynak

Angular sevdiğimiz bir abimizdi. Karmaşık bir framework'tü, her şeyi yapmaya çalışırdı. Mesela ben yapmam. Bundle size'ı arttırırdı, ben arttırmam. Developerlar'ın işi düştüğünde sırtını dönerdi, ben dönmem. Angular sevdiğimiz bir abimizdi ama komponentleri de bir tuhaf render'lardı. Bizde hook'lar masaya konur. Herkes ihtiyacı kadarını alır. Eskiler sende kalsın kardeş, junior'ların kafasını karıştırma yeter.
- React

Mocklama serüvenimizde React'a kadar geldik. Çoğumuz React framework'ünü kullanıyoruz ve komponent testleriyle haşır neşir oluyoruz. Peki mocklama React komponentleriyle birlikte nasıl çalışır?

Yazının kodlarına Github üzerinden erişebilirsiniz.

Girizgah

Framework'lerle birlikte komponent dediğimiz özel fonksiyon türleri hayatımıza girer ve temel amaçları DOM elementri üretmek ve DOM ağacına render etmektir. Kullanıcının kayıtlı olup olmamasına göre formun içeriğini yöneten Registration komponentini ele alalım.

Registration.tsx

RegisterForm.tsx

LoginForm.tsx

import React from "react";
import LoginForm from "./LoginForm";
import RegisterForm from "./RegisterForm";
const Registration: React.FC<RegistrationProps> = ({ isRegistered }) => {
  return isRegistered ? <LoginForm /> : <RegisterForm />;
};
interface RegistrationProps {
  isRegistered: boolean;
}
export default Registration;

Gördüğümüz üzere komponentler iç içe kullanılırlar ve uygulamanın giriş dosyasında özel bir metodla DOM ağacına render edilirler.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

İlgili dosya browser'da çalıştırıldığında DOM ağacı erişebilir haldedir. Ancak testlerimiz NodeJS ortamında çalıştığından ötürü ortada DOM ağacı yoktur. Komponentlerin test edilebilmesi için özel test kütüphaneleri tarafından sahte DOM ağacı oluşturulur. Makalede Jest ile birlikte React'tın en popüler test kütüphanesi olan React Testing Library kullanacağız.

Komponentleri mocklamak için önceki yazılardan faydalanabilir ve döndüreceği DOM içeriğini belirleyebiliriz. Genelde div döndürüp data-testid parametresi olarak komponent ismi vermeyi tercih ediyorum.

Registration.test.tsx

import { render } from "@testing-library/react";
import Registration from "./Registration";
jest.mock("./RegisterForm", () => {
  return {
    default: jest.fn().mockReturnValue(<div data-testid="register-form" />),
  };
});
test("playground", () => {
  const { debug } = render(<Registration isRegistered={false} />);
  console.log("DOM:");
  // prints the HTML of the fake DOM tree at that stage of the test
  debug();
});

=== Output:DOM:
<body>
  <div>
    <div data-testid="register-form" />
  </div>
</body>

render metodu DOM ağacıyla yapabileceğimiz işlemler için metodlar barındıran bir nesne döndürür. Mock içeriklerin başarıyla render olduğunu görmek için
debug metodunu kullanabiliriz. Çıktıya baktığımızda istediğimiz değerin render edilmiş olduğunu görebiliriz. Komponentin başarıyla mocklandığını görmenin huzuruyla yolumuza devam edelim.

Komponent Mocklama

Hatırlarsanız test yazarkenki temel prensibimiz, testin odaklandığı fonksiyon dışındaki fonksiyonların mümkün mertebe çalıştırılmamasıydı. React'da ise child komponentlerin render edilmemesini ve unit test gerekliliklerinin karşılanmasını istiyoruz.

Test yazarken kendimize sormamız gereken soru "Bu komponentin görevi nedir?" olmalıdır. Registration komponentinin görevi, isRegistered props değerine göre hangi formun ekranda gösterileceğine karar vermektir. İçerisinde hangi inputlarin olduğunu ve işlem bitince yönlendirdiği sayfayı test etmemeliyiz. Bunlar formu render eden komponentin testinde ele alınmalıdır. data-testid değeriyle doğru formun render edilip edilmediğini kontrol edebiliriz.

Örnekleri basit tutmaya çalışacağım ve her seferinde farklı biçimde yazışlar göstereceğim ki kullanım örneklerini kafamızda çeşitlendirelim. Temel fikre odaklanırsanız kendi örneklerinize uygulayabileceğinizi düşünüyorum.

Testlerimizi yazalım.

jest.mock

jest.spyOn

import { render, screen } from "@testing-library/react";
import LoginForm from "./LoginForm";
import RegisterForm from "./RegisterForm";
import Registration from "./Registration";
jest.mock("./LoginForm", () => {
  return {
    default: jest.fn().mockReturnValue(<div data-testid="login-form" />),
  };
});
jest.mock("./RegisterForm", () => {
  return {
    default: jest.fn().mockReturnValue(<div data-testid="register-form" />),
  };
});
describe("<Registration /> tests", () => {
  afterEach(() => {
    jest.clearAllMocks();
  });
  it("should render the register form when isRegistered is false", () => {
    render(<Registration isRegistered={false} />);
    expect(RegisterForm).toHaveBeenCalled();
    expect(LoginForm).not.toHaveBeenCalled();
    expect(screen.getByTestId("register-form")).toBeInTheDocument();
  });
  it("should render the login form when isRegistered is true", () => {
    render(<Registration isRegistered={true} />);
    expect(LoginForm).toHaveBeenCalled();
    expect(RegisterForm).not.toHaveBeenCalled();
    expect(screen.getByTestId("login-form")).toBeInTheDocument();
  });
});

=== Output:PASS  src/Registration.test.tsx
  <Registration> tests
    ✓ should render <RegisterForm /> when isRegistered equal false (57 ms)
    ✓ should render <LoginForm /> when isRegistered equal true (4 ms)

Mocklamalar test ihtiyaçlarına göre şekillendirilmelidir. Render edildiğini görmek istiyorsak basit bir data-testid işimizi görecektir.

Propsları Mock Komponente Geçme

Yapılacaklar listesi ve maddeleri için iki farklı komponentimiz olduğunu düşünelim.

App.tsx

TodoList.tsx

TodoItem.tsx

import React from "react";
import TodoList from "./TodoList";
function App() {
  const todos = [
    {
      title: "Ölümcül task'ı bitir.",
      isCompleted: false,
    },
    {
      title: "Yalandan iki spor yap.",
      isCompleted: false,
    },
    {
      title: "Yarım saat diye başlayıp 3 saat sürecek şekilde oyun oyna.",
      isCompleted: true,
    },
    {
      title: "Olmayan zamanını sosyal medyada öldür.",
      isCompleted: true,
    },
  ];
  return (
    <TodoList todos={todos} />
  );
}
export default App;

Tamamlanan maddelerin ekranda gösterilmediğinden emin olmak istiyoruz.

TodoList.test.tsx

import { render, screen } from "@testing-library/react";
import TodoList from "./TodoList";
jest.mock("./TodoItem", () => jest.fn().mockReturnValue(
  <div data-testid="todo-item" />
));
describe("<TodoList> tests", () => {
  test("should render only incomplete todo items", () => {
    const mockTodos = [
      {
        title: "Ölümcül task'ı bitir.",
        isCompleted: false,
      },
      {
        title: "Yalandan iki spor yap.",
        isCompleted: false,
      },
      {
        title: "Yarım saat diye başlayıp 3 saat sürecek şekilde oyun oyna.",
        isCompleted: true,
      },
      {
        title: "Olmayan zamanını sosyal medyada öldür.",
        isCompleted: true,
      },
    ];
    const { debug } = render(<TodoList todos={mockTodos} />);
    console.log("DOM:");
    debug();
    expect(screen.getAllByTestId("todo-item")).toHaveLength(2);
    expect(screen.getByText("Ölümcül task'ı bitir.")).toBeInTheDocument();
    expect(screen.getByText("Yalandan iki spor yap.")).toBeInTheDocument();
  });
});

=== Output:DOM:
<body>
  <div>
    <div>
      <p>Yapılacaklar:</p>
      <div data-testid="todo-item" />
      <div data-testid="todo-item" />
      <div data-testid="todo-item" />
      <div data-testid="todo-item" />
    </div>
  </div>
</body>
FAIL  src/TodoList.test.tsx
  <TodoList> tests
    ✕ should render only incomplete todo items (83 ms)
      Expected length: 2
      Received length: 4

Mock başarılı... ama bir problem var gibi. Tamamlanan maddeler de gösteriliyor ve hangi maddelerin render ettirildiğini belirten bir şey yok. Komponenti mockladığımızda render olmasını engelleyen koşul da kaybolur. Tamamlanma durumuna göre mock fonksiyonunun döndürdüğü değeri manipüle edebiliriz.

TodoList.test.tsx

import { render, screen } from "@testing-library/react";
import { TodoItemProps } from "./TodoItem";
import TodoList from "./TodoList";
jest.mock("./TodoItem", () =>
  jest.fn(({ isCompleted, title }: TodoItemProps) => {
    return !isCompleted ? <div data-testid="todo-item">{title}</div> : null;
  })
);
describe("<TodoList> tests", () => {
  test("should render only incomplete todo items", () => {
    const mockTodos = [
      {
        title: "Ölümcül task'ı bitir.",
        isCompleted: false,
      },
      {
        title: "Yalandan iki spor yap.",
        isCompleted: false,
      },
      {
        title: "Yarım saat diye başlayıp 3 saat sürecek şekilde oyun oyna.",
        isCompleted: true,
      },
      {
        title: "Olmayan zamanını sosyal medyada öldür.",
        isCompleted: true,
      },
    ];
    const { debug } = render(<TodoList todos={mockTodos} />);
    console.log("DOM:");
    debug();
    expect(screen.getAllByTestId("todo-item")).toHaveLength(2);
    expect(screen.getByText("Ölümcül task'ı bitir.")).toBeInTheDocument();
    expect(screen.getByText("Yalandan iki spor yap.")).toBeInTheDocument();
  });
});

=== Output:DOM:
<body>
  <div>
    <div>
      <p>Yapılacaklar:</p>
      <div data-testid="todo-item">Ölümcül task'ı bitir.</div>
      <div data-testid="todo-item">Yalandan iki spor yap.</div>
    </div>
  </div>
</body>
PASS  src/TodoList.test.tsx
  <TodoList> tests
    ✓ should render only incomplete todo items (93 ms)

State'leri Manipüle Ettiğimiz Child Komponentleri Mocklama

Bazen komponent state değerlerini alt komponentlerden değiştirip yeniden render olmasını isteriz. Butona tıklandığında kişi listesinin çekildiği ve üst komponentte render edildiği bir senaryo olabilir.

PersonList.tsx

Person.tsx

FetchButton.tsx

import React, { useState } from "react";
import FetchButton from "./FetchButton";
import Person from "./Person";
const PersonList: React.FC = () => {
  const [persons, setPersons] = useState<any>([]);
  return (
    <div>
      <FetchButton setPersons={setPersons} />
      {persons.map((person: any) => (
        <Person
          key={person.email}
          firstName={person.firstName}
          lastName={person.lastName}
          email={person.email}
        />
      ))}
    </div>
  );
};
export default PersonList;

Bu senaryoyu FetchButton komponentine ilettiğimiz setPersons setter metoduyla örneklendirebiliriz. Bunun için div elementine onClick olayı tanımlayıp dönüş değerini özelleştireceğiz.

PersonList.test.tsx

import { fireEvent, render, screen } from "@testing-library/react";
import { PersonProps } from "./Person";
import * as FetchButtonModule from "./FetchButton";
import PersonList from "./PersonList";
// div içeriğinin gerçekte nasıl olduğu hiç önemli değil.
// doğru kişiyi render ettiğimizi teyit edebiliyorsak kafi. 
jest.mock("./Person", () =>
  jest.fn(({ firstName, lastName, email }: PersonProps) => (
    <div data-testid="person">
      {firstName} - {lastName} - {email}
    </div>
  ))
);
describe("<PersonList /> tests", () => {
  test("should get persons when click fetch button", () => {
    const mockPersons = [
      {
        firstName: "Terry",
        lastName: "Medhurst",
        email: "atuny0@sohu.com",
      },
      {
        firstName: "Sheldon",
        lastName: "Quigley",
        email: "hbingley1@plala.or.jp",
      },
    ];
    jest.spyOn(FetchButtonModule, "default")
        .mockImplementation(({ setPersons }: FetchButtonModule.FetchButtonProps) => (
          <button
            data-testid="fetch-button"
            onClick={() => setPersons(mockPersons)}
          />
        ));
    render(<PersonList />);
    expect(screen.queryAllByTestId("person")).toHaveLength(0);
    const fetchButton = screen.getByTestId("fetch-button");
    fireEvent.click(fetchButton);
    expect(screen.getAllByTestId("person")).toHaveLength(2);
    screen.getAllByTestId("person").forEach((personEl, index) => {
      const { firstName, lastName, email } = mockPersons[index];
      expect(personEl).toHaveTextContent(`${firstName} - ${lastName} - ${email}`);
    });
  });
});

=== Output:PASS  src/PersonList.test.tsx
  <PersonList /> tests
    ✓ should get persons when click fetch button (36 ms)

PersonList komponentinin görevi state değerine göre kişileri render ettirmektir. Dolayısıyla alt komponentin listeyi nereden ve nasıl çektiğiyle ilgilenmez.

Kütüphane Komponentlerini Mocklama

Sayfalarımızın içeriği karmaşıklaştıkça yüklenme süresi şaha kalkar. Bu gibi durumlarda bildiğimiz üzere lazy load namı diğer tembel yükleme kullanırız. Adeta ödevini son güne bırakan tembel bir öğrenci misali komponentin ekranda gözükmesi yaklaşana kadar render etmez. Testleri yaptığımız NodeJS ortamında ekran dediğimiz kavram da olmadığı için komponentler hiçbir zaman render olmaz ve testleri gerçekleştiremeyiz.

Örneğimizi rastgele seçtiğim react-lazyload kütüphanesi üzerinden gösteriyor olacağım. Bunun yerine diğer herhangi bir kütüphane gelebilir.

Photos.tsx

import axios from "axios";
import { useEffect, useState } from "react";
import LazyLoad from "react-lazyload";
const Photos: React.FC = () => {
  const [photos, setPhotos] = useState([]);
  useEffect(() => {
    axios.get("https://jsonplaceholder.typicode.com/photos").then((result: any) => {
      setPhotos(result);
    });
  }, []);
  return (
    <div>
      {photos.map((photo: any) => (
        <LazyLoad
          key={photo.id}
          height={600}
        >
          <img
            data-testid="photo"
            alt={photo.title}
            src={photo.url}
          />
        </LazyLoad>
      ))}
    </div>
  );
};
export default Photos;

Testini yazalım.

Photos.test.tsx

import { render, screen } from "@testing-library/react";
import axios from "axios";
import Photos from "./Photos";
describe("<Photos /> tests", () => {
  let mockPhotos: Array<{
    id: number,
    title: string,
    url: string,
  }>;
  beforeAll(() => {
    mockPhotos = [
      {
        id: 1,
        title: "accusamus beatae ad facilis cum similique qui sunt",
        url: "https://via.placeholder.com/600/92c952",
      },
      {
        id: 2,
        title: "reprehenderit est deserunt velit ipsam",
        url: "https://via.placeholder.com/600/771796",
      },
      {
        id: 3,
        title: "officia porro iure quia iusto qui ipsa ut modi",
        url: "https://via.placeholder.com/600/24f355",
      },
    ];
    jest.spyOn(axios, "get").mockImplementation((url: string): any => {
      if (url === "https://jsonplaceholder.typicode.com/photos") {
        return Promise.resolve(mockPhotos);
      }
      return Promise.reject();
    });
  });
  test("should render greeting text without name", async () => {
    const { debug } = render(<Photos />);
    // useEffect'teki fetch metodu ile veriyi çektikten sonra
    // state değerini güncelliyoruz. ancak bu durum meydana
    // gelmesini beklediğimiz render test içerisinde beklenmez.
    // ve eski dom içeriği görürüz. testi bekletmek adına `photo`
    // test id'li elementin render edilmesini bekleriz.
    const photoElements = await screen.findAllByTestId("photo");
    debug();
    photoElements.forEach((photoEl, index) => {
      expect(photoEl).toHaveAttribute("alt", mockPhotos[index].title);
      expect(photoEl).toHaveAttribute("src", mockPhotos[index].url);
    });
  });
});

=== Output:<body>
  <div>
    <div>
      <div class="lazyload-wrapper">
        <div
          class="lazyload-placeholder"
          style="height: 600px;"
        />
      </div>
      <div class="lazyload-wrapper">
        <div
          class="lazyload-placeholder"
          style="height: 600px;"
        />
      </div>
      <div class="lazyload-wrapper">
        <div
          class="lazyload-placeholder"
          style="height: 600px;"
        />
      </div>
    </div>
  </div>
</body>
FAIL src/Photos.test.tsx
  <Photos /> tests
    ✕ should render greeting text without name (1083 ms)
      wUnable to find an element by: [data-testid="photo"]

img elementi görmek yerine yer tutucuyla karşılaşıyoruz. NodeJS'de intersection observer olmadığından ötürü hiçbir zaman resim elementi DOM'a render olmaz. Bu şekilde testimizi gerçekleştiremeyeceğimizden dolayı LazyLoad komponentini mocklayacağız.

Photos.test.tsx

import { render, screen } from "@testing-library/react";
import axios from "axios";
import * as ReactLazyLoadModule from "react-lazyload";
import Photos from "./Photos";
describe("<Photos /> tests", () => {
  let mockPhotos: Array<{
    id: number,
    title: string,
    url: string,
  }>;
  beforeAll(() => {
    mockPhotos = [
      {
        id: 1,
        title: "accusamus beatae ad facilis cum similique qui sunt",
        url: "https://via.placeholder.com/600/92c952",
      },
      {
        id: 2,
        title: "reprehenderit est deserunt velit ipsam",
        url: "https://via.placeholder.com/600/771796",
      },
      {
        id: 3,
        title: "officia porro iure quia iusto qui ipsa ut modi",
        url: "https://via.placeholder.com/600/24f355",
      },
    ];
    jest.spyOn(axios, "get").mockImplementation((url: string): any => {
      if (url === "https://jsonplaceholder.typicode.com/photos") {
        return Promise.resolve(mockPhotos);
      }
      return Promise.reject();
    });
  });
  test("should render greeting text without name", async () => {
    jest
      .spyOn(ReactLazyLoadModule, "default")
      .mockImplementation(({ children }: any) => children);
    const { debug } = render(<Photos />);
    // useEffect'teki fetch metodu ile veriyi çektikten sonra
    // state değerini güncelliyoruz. ancak bu durum meydana
    // gelmesini beklediğimiz render test içerisinde beklenmez.
    // ve eski dom içeriği görürüz. testi bekletmek adına `photo`
    // test id'li elementin render edilmesini bekleriz.
    const photoElements = await screen.findAllByTestId("photo");
    debug();
    photoElements.forEach((photoEl, index) => {
      expect(photoEl).toHaveAttribute("alt", mockPhotos[index].title);
      expect(photoEl).toHaveAttribute("src", mockPhotos[index].url);
    });
  });
});

=== Output:<body>
  <div>
    <div>
      <img
        alt="accusamus beatae ad facilis cum similique qui sunt"
        data-testid="photo"
        src="https://via.placeholder.com/600/92c952"
      />
      <img
        alt="reprehenderit est deserunt velit ipsam"
        data-testid="photo"
        src="https://via.placeholder.com/600/771796"
      />
      <img
        alt="officia porro iure quia iusto qui ipsa ut modi"
        data-testid="photo"
        src="https://via.placeholder.com/600/24f355"
      />
    </div>
  </div>
</body>
PASS  src/components/lazyload/Photos.test.tsx
  <Photos /> tests
    ✓ should render greeting text without name (55 ms)

Seri Sonu Canavarı

Yazının sonuna gelirken serideki bütün konuları birleştiren ve size challange olacak bir örnek koymak istedim. Geriye doğru sayma vazifesi icra eden mini React projesinin kodlarını aşağıya bıraktım. Buyrun testlerini yazmaya. Testin çıktısından faydalanabilirsiniz.

RemainingTimer.tsx

TimeBox.tsx

utils/date.ts

import React, { useEffect, useState } from "react";
import TimeBox from "./TimeBox";
import { calculateDeltaBetweenDates, convertDeltaToDaysHoursMinutes } from "./utils/date";
const timerEndDate = new Date(2023, 5, 18, 17);
const RemainingTimer: React.FC = () => {
  const [remainingTime, setRemainingTime] = useState(calculateDeltaBetweenDates(timerEndDate));
  let remainingTimerInterval: any;
  useEffect(() => {
    remainingTimerInterval = setInterval(() => {
      setRemainingTime(calculateDeltaBetweenDates(timerEndDate));
    }, 1000);
    return () => {
      clearInterval(remainingTimerInterval);
    };
  }, []);
  if (remainingTime === 0) {
    clearInterval(remainingTimerInterval);
    return <div data-testid="timer-ended-text">Timer finished!</div>;
  }
  const { remainingDays, remainingHours, remainingMinutes, remainingSeconds } =
    convertDeltaToDaysHoursMinutes(remainingTime);
  return (
    <div data-testid="time-box-container">
      <TimeBox
        type="day"
        value={remainingDays}
      />
      <TimeBox
        type="hour"
        value={remainingHours}
      />
      <TimeBox
        type="min"
        value={remainingMinutes}
      />
      <TimeBox
        type="sec"
        value={remainingSeconds}
      />
    </div>
  );
};
export default RemainingTimer;

=== Output:PASS  src/RemainingTimer.test.tsx
  <RemainingTimer /> tests
    ✓ should render time that returned convertDeltaToDaysHoursMinutes when delta greater than zero (79 ms)
    ✓ should render timer ended text when delta equal zero (41 ms)

Kapanış

React komponentlerine değindiğimiz bu yazıyla birlikte mocking serim sona erdi. Umarım açıklayıcı olmuştur. Testle ilgili İngilizce olarak bile çok büyük bir kaynak sıkıntısı varken bu yazının can suyu olmasını umuyorum. Sonuna kadar okuduysanız birkaç projenin testine giriştikten sonra yola alfa testçi olarak devam edebileceğinizi düşünüyorum. Seri hakkında geribildirimlerinizi duymaktan mutlu ve motive olurum.

Yazı burada biter. Sağlıcakla kalın.

Kaynaklar

https://jestjs.io/docs