Руководство издевается с Джестом - я чего-то не понимаю - PullRequest
Новая
       9

Руководство издевается с Джестом - я чего-то не понимаю

0 голосов
/ 01 июня 2018

Я учу шутить, и пытаюсь сделать ручной макет для API, я что-то упускаю.

Я издеваюсь над вызовом API для giphy.Я вижу много разных синтаксисов для ручных макетов, и, к сожалению, они сейчас не имеют особого смысла для меня.Я пытался кодировать вместе с https://hackernoon.com/api-testing-with-jest-d1ab74005c0a и https://facebook.github.io/jest/docs/en/tutorial-async.html,, но я застрял.

У меня есть компонент под названием GifListContainer, который отображает 3 GIF-файла, есть функция поиска, я просто хочу изучать ручной макет с поддельными данными.

Я использую create-реагировать-приложение, я вижу много людей, использующих isomorphic-fetch и другие пакеты, но так как встроен jest, я не могу сделать это без добавления чего-либо еще?

Я не могу понять, как написать макет вручную, я чувствую, что упускаю что-то простое.Это нормально, если я не использую макет (используя другой синтаксис тестирования, потому что я не тестирую файл _ mock _).Спасибо за ваше время.

Я получаю ошибку: 

  ● should load gifs
    TypeError: GifContainer.api is not a function
      at Object.<anonymous>.it (src/Part_2/GifContainer.test.js:10:23)
  ✕ should load gifs (6ms)

GifListContainer.js 

import {gifApi} from './api'
class GifListContainer extends Component {
  state = {
    gifs: []
  };  
  componentDidMount() {
    this.displayGifs('coding');
  } 
  displayGifs = (query) => {
    gifApi(query)
      .then(res => res.json())
      .then(json => {
        let firstThreeGifs = json.data.slice(0, 3);
        let urls = firstThreeGifs.map(
          gif => gif.images.original.url.split("?")[0]
        );
        this.setState({
          gifs: [...urls]
        });
      });
  };
    //after this there's a search function and the render and such.

api.js 

const urlPartOne = "http://api.giphy.com/v1/gifs/search?q="
const urlPartTwo = "&api_key=UE0dCN2WofIwVF0RPbpHo0Lz0k9VhqdG"
const gifApi = (query) => {
  return fetch(urlPartOne + query + urlPartTwo)
}
export {gifApi}

GifContainer.test.js 

import React from 'react'
let mockFunction = jest.mock('./api.js');
import * as GifContainer from './GifContainer';
it('should load gifs', () => {
  return GifContainer.displayGifs('sunshine')
  .then(data => {
  expect(data).toBeDefined()
  expect(data.entity.data.type).toEqual('gif')
  })
})

_ mocks _ / api.js Я просто не понимаю, как это написать.

const fs = require('fs')
const api = (query) => new Promise((resolve, reject) => {
fs.readFile(`./src/Part_2/__mockData__/query.json`, 'utf8', (err, data) => {
if (err) reject(err)
  resolve({ entity: JSON.parse(data) })
  })
})
export default api

и затем макетировать данные в папке _ mockData _ / sushine.json 

/* http://api.giphy.com/v1/gifs/search?q=sunshine&api_key=UE0dCN2WofIwVF0RPbpHo0Lz0k9VhqdG */
{
  "data": [
    {
      "type": "gif",
    }
  ],
  "meta": {
    "status": 200,
    "msg": "OK",
    "response_id": "5b11716a33554c732e0ddf42"
  }
}

Спасибо!

1 Ответ

0 голосов
/ 01 июня 2018

Не думаю, что проблема в самом макете.На самом деле, в первую очередь вам нужно улучшить способ проведения тестового тестирования модулей.

В настоящее время существуют такие инструменты, как Enzyme (http://airbnb.io/enzyme/), которые очень помогают вам тестировать компоненты React.

Проверяли ли вы раздел Testing React Apps для Jest? Специально для части DOM Testing? Взгляните сюда: https://facebook.github.io/jest/docs/en/tutorial-react.html#dom-testing

Возвращаясь к вашей проблеме, я думаю, это потому, что вы экспортируете fn какпо умолчанию в файле макета, но еще не сделали этого в файле API. Попробуйте поставить оба равенства и дайте мне знать!

...