Как смоделировать API, чтобы проверить, правильно ли он рендеринг с шуткой и выборкой - PullRequest
Новая
       3

Как смоделировать API, чтобы проверить, правильно ли он рендеринг с шуткой и выборкой

1 голос
/ 17 апреля 2020

После многочисленных исследований я так и не нашел конкретного примера, который бы помог мне понять это.

Чего я хочу достичь: создайте макет API и проверьте, правильно ли он рендерится.

Может кто-нибудь может дайте мне пример кода, чтобы увидеть, как конкретно проверить это с помощью jest, чтобы я мог применить это ко всем другим своим функциям в моем проекте, я действительно не понимаю, как это сделать.

Спасибо за вашу помощь.

РЕАЛЬНЫЙ API из папки API 

export const searchTrack = search => {
  return fetch(
    `${url}/search/tracks?q=${encodeURIComponent(
      search
    )}&limit=250&media=music`,
    {
      method: "GET",
      headers: {
        Authorization: Cookies.get("token")
      }
    }
  )
    .then(response => {
      return response.json();
    })
    .then(jsonFormat => {
      return jsonFormat.results;
    })
    .catch(() => {
      console.error("fetch for search dont work");
    });
};

addTracksPlaylist. vue метод называется 

  methods: {
    search() {
      if (this.term !== "") {
        this.results = [];
        this.searching = true;
        apiPlaylist
          .searchTrack(this.term)
          .then(res => {
            if (res.status != 401) {
              this.searching = false;
              this.results = res;
              this.noResults = this.results.length === 0;
            }
          })
          .catch(() => {
            this.$router.push("/login");
          });
      }
    }
  }

Я видел, что все создавали папку __mocks__ в папке api, поэтому я создал папку с возвратом API GET 

    {
      wrapperType: "track",
      kind: "song",
      artistId: 461932,
      collectionId: 196480323,
      trackId: 196480329,
      artistName: "Europe",
      collectionName: "The Final Countdown",
      trackName: "The Final Countdown",
      collectionCensoredName: "The Final Countdown",
      trackCensoredName: "The Final Countdown",
      artistViewUrl: "https://itunes.apple.com/us/artist/europe/id461932?uo=4",
      collectionViewUrl:
        "https://itunes.apple.com/us/album/the-final-countdown/id196480323?i=196480329&uo=4",
      trackViewUrl:
        "https://itunes.apple.com/us/album/the-final-countdown/id196480323?i=196480329&uo=4",
      previewUrl:
        "http://a1815.phobos.apple.com/us/r1000/101/Music/70/f0/fd/mzm.hhpjhkpl.aac.p.m4a",
      artworkUrl30:
        "http://a5.mzstatic.com/us/r30/Music/fc/4c/f5/mzi.jpmevzoi.30x30-50.jpg",
      artworkUrl60:
        "http://a4.mzstatic.com/us/r30/Music/fc/4c/f5/mzi.jpmevzoi.60x60-50.jpg",
      artworkUrl100:
        "http://a3.mzstatic.com/us/r30/Music/fc/4c/f5/mzi.jpmevzoi.100x100-75.jpg",
      collectionPrice: 9.99,
      trackPrice: 1.29,
      releaseDate: "1988-09-16T07:00:00Z",
      collectionExplicitness: "notExplicit",
      trackExplicitness: "notExplicit",
      discCount: 1,
      discNumber: 1,
      trackCount: 13,
      trackNumber: 1,
      trackTimeMillis: 310333,
      country: "USA",
      currency: "USD",
      primaryGenreName: "Rock",
      radioStationUrl: "https://itunes.apple.com/station/idra.196480329"
    },
    {}
  ]
};

1 Ответ

1 голос
/ 18 апреля 2020

Если вам нужно протестировать свою функцию путем насмешки ответа на вызов метода searchTrack, вы можете использовать шутки, чтобы легко добиться этого.

Шутку можно создать с помощью простого jest.fn().

Вы можете предоставить свою собственную реализацию, используя один из следующих способов: 

jest.fn(() => { //implementation goes here })

OR

jest.fn().mockImplementation(() => { //implementation goes here })

Поскольку вам нужно смоделировать ответ API, у вас должен быть макет, который возвращает Обещание.

Так что-то вроде этого должно сделать вашу работу: 

jest.fn(() => Promise.resolve(mockDataValue))

Jest также предоставляет сокращение для этого через функцию mockResolvedValue. 

jest.fn().mockResolvedValue(data)

This также делает то же самое. Кроме того, существует метод mockRejectedValue, если вы также хотите проверить сценарий ошибки.

Дополнительная информация доступна в Справочник по Jest Mock API

...