Невозможно получить реквизит во время тестирования с помощью Jest Enzyme React - PullRequest
Новая
       11

Невозможно получить реквизит во время тестирования с помощью Jest Enzyme React

0 голосов
/ 25 августа 2018

Код моего компонента: 

import React from 'react'
export default class InfoViewComponent extends React.Component {
  constructor (props) {
    super(props)
    this.toggle = this.toggle.bind(this)
    this.state = {
      counter: 1,
      activeTab: '1',
    }
  }
  render () {
    const data = this.props.data
    return (
      <section className="dish">
        <div>
          <Row>
            <Col>
                  <h1 className="display-1">{data.title}</h1>
                  <Button  onClick={this.handleAddToCart} >Add to Cart</Button>
                  <Button onClick={this.handleSubmit}>Place order</Button>
                </div>
                <p>{data.description}</p>

                <div>
                  <ButtonGroup>
                    <Button>-</Button>
                    <Button>{this.state.counter}</Button>
                  </ButtonGroup>
                 </div>
          </Row>
        </div>
      </section>
    )
  }
}

Код тестирования 

import React from 'react'
import { configure, shallow } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
import InfoViewComponent from './InfoViewComponent'

configure({ adapter: new Adapter() })


describe('Info Component', () => {
  it('Should be defined', () => {
    const wrapper = shallow(<InfoViewComponent />)
    expect(wrapper.find(InfoViewComponent)).toBeDefined()
  })
})

данные: 

"menus": [
    {
      "code": "h8",
      "title": "Some Text",
      "type": "Some Text",
      "description": "Some Text",
      "images": [],
      "keywords": [
        "Some Text",
        "Some Text"
      ],
      "price": "3",
      "about": "Some Text,
     ],
    },
  ]

Я не могу получить все реквизиты из моего компонента в код тестирования. Я получаю сообщение об ошибке «TypeError: Невозможно прочитать свойство 'title' из undefined". Мне нужна помощь, как это сделать.
Добавлены данные для понимания. Я получаю данные из firebase в одном компоненте и передаю их в качестве реквизита в InfoViewComponent, который должен быть протестирован. Заранее спасибо.

1 Ответ

0 голосов
/ 25 августа 2018

Вы пытаетесь получить доступ к заголовку, когда данные не определены. Итак, вам нужно проверить, являются ли данные неопределенными или нет, и только затем получить доступ к их полям, как показано ниже 

      {data && data != undefined && (<Row>
        <Col>
              <h1 className="display-1">{data.title}</h1>
              <Button  onClick={this.handleAddToCart} >Add to Cart</Button>
              <Button onClick={this.handleSubmit}>Place order</Button>
            </div>
            <p>{data.description}</p>

            <div>
              <ButtonGroup>
                <Button>-</Button>
                <Button>{this.state.counter}</Button>
              </ButtonGroup>
             </div>
      </Row>)}
...