Почему мелкий компонент рендеринга с mock json, кажется, вызывает исключение объявления? - PullRequest
Новая
       12

Почему мелкий компонент рендеринга с mock json, кажется, вызывает исключение объявления?

0 голосов
/ 07 мая 2018

Когда я запускаю тестовый скрипт для моего StreamItem.js реагирующего компонента, я получаю следующую ошибку командной строки: 

StreamItem › encountered a declaration exception

TypeError: Cannot read property 'profile_image_url' of undefined

  at StreamItem.tweetOrRetweetProfileImageSetter.tweet [as tweetOrRetweetProfileImageSetter] (src/components/StreamItem.js:7:135)
  at _react2.default.createElement.props.streamItemsFromParent.map.tweet (src/components/StreamItem.js:16:181)
      at Buffer.map (<anonymous>)
  at StreamItem.render (src/components/StreamItem.js:15:42)
  at ReactShallowRenderer._mountClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer-shallow.development.js:187:37)
  at ReactShallowRenderer.render (node_modules/react-test-renderer/cjs/react-test-renderer-shallow.development.js:135:14)
  at node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:287:35
  at withSetStateAllowed (node_modules/enzyme-adapter-utils/build/Utils.js:94:16)
  at Object.render (node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:286:68)
  at new ShallowWrapper (node_modules/enzyme/build/ShallowWrapper.js:119:22)
  at shallow (node_modules/enzyme/build/shallow.js:19:10)
  at Suite.Object.<anonymous>.describe (src/components/StreamItem.test.js:12:42)
  at Object.<anonymous> (src/components/StreamItem.test.js:9:1)
      at <anonymous>

Возможно, эта ошибка связана с ограничениями, связанными с мелкой функцией рендеринга фермента? Особенно когда дело доходит до разбора ложных данных ...? Ниже я предоставил копии теста компонента, самого компонента и главную ссылку на фиктивные данные, проанализированные как тесты в тесте.

репо / реагируют-клиент / SRC / компоненты / StreamItem.test.js 

import React from 'react';
import { shallow } from 'enzyme';
import StreamItem from './StreamItem';

const fs = require("fs");
const mockData = fs.readFileSync('../express-backend/mock_data/tweet.json');

describe('StreamItem', () => {
  const mockRemove = jest.fn();
  const props = {streamItemsFromParent: mockData}
  const streamItem = shallow(<StreamItem {...props} />);

});

репо / реагировать-клиент / SRC / компоненты / StreamItem.js 

import React, { Component } from 'react';

class StreamItem extends Component {

  tweetOrRetweetProfileImageSetter = tweet => {

    const tweetProfileImage = tweet.hasOwnProperty('retweeted_status') ? tweet.retweeted_status.user.profile_image_url : tweet.user.profile_image_url;
    return tweetProfileImage

  }

  render() {
      return (
        <ul>
          {this.props.streamItemsFromParent.map(tweet =>
            <li key={tweet.id}><img src={this.tweetOrRetweetProfileImageSetter(tweet)} alt='Profile' />{tweet.text}</li>
          )}
        </ul>
      )
  }
}


export default StreamItem;

repo / express-backend / mock_data / tweet.json (макетный файл json, используемый для тестов) Суть: https://gist.github.com/oliverpople/653f17546845ef1d580e741605e0fc42

1 Ответ

0 голосов
/ 07 мая 2018

Вы не проанализировали JSON. Вы должны указать кодировку в функции readFileSync, чтобы она возвращала строку вместо буфера, а затем использовать JSON.parse для анализа JSON: 

const mockData = JSON.parse(fs.readFileSync('../express-backend/mock_data/tweet.json', 'utf8'));
...