Как вы пишете Jest тесты для getInitialProps?

Question

static async getInitialProps({ query }) {
  let content;
  let alert;

  try {
    const first = query.first ? query.first : '';
    content = await getContent(first);
  } catch (error) {
    alert = 'There was an error loading data, please try again.';
    content = [];
  }

  return {
    content,
    alert,
  };
}

Я пытаюсь написать тесты для этой логики, но из-за того, что это код на стороне сервера, я пытаюсь понять, как написать тест для него, так как он не доступен для меня в instance ().

Google не показал мне пути к этому, поэтому мне интересно, как другие взялись за написание тестов для реквизитов getInitial.

Answer 1

Во-первых, посмотрите, что такое статический метод и что делает ключевое слово static .

Так как getInitialProps простостатическая функция на компоненте , вы можете проверить ее вручную, как и любую другую функцию.

import MyComponent from "./path/to/MyComponent";

// Mock the getContent function which I don't know where it comes from.
jest.mock("../someModule.js", () => ({
  getContent: () => Promise.reject()
}));

describe("MyComponent", () => {
  it('populates the "alert" prop on getContent failure.', async () => {
    // Inject anything you want to test
    const props = await MyComponent.getInitialProps({
      query: { first: "whatever" }
    });

    // And make sure it results in what you want.
    expect(props).toEqual({
      content: [],
      alert: "There was an error loading data, please try again."
    });
  });
});

В большинстве случаев getInitialProps так или иначе вызывается так .

export default class MyApp extends App {
  static async getInitialProps ({ Component, router, ctx }) {
    let pageProps = {}

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }

    return { pageProps }
  }

Документация описывает getInitialProps goal , и мы можем подтвердить, что можно вызывать его напрямую и проверить его возвращаемое значение как Object.

Обратите внимание, что для загрузки данных при загрузке страницы мы используем getInitialProps, который является async статическим методом. Он может асинхронно извлекать все, что преобразуется в обычный JavaScript-код Object, который заполняет props.

Данные, возвращаемые из getInitialProps, сериализуются при рендеринге сервера, аналогично JSON.stringify. Убедитесь, что возвращаемый объект из getInitialProps является простым Object и не использует Date, Map или Set.

Для начальной загрузки страницы на сервере будет выполняться getInitialPropsтолько. getInitialProps будет выполняться на клиенте только при переходе на другой маршрут через компонент Link или с использованием API маршрутизации.