Question

我的组件代码：

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'的错误”。我需要有关如何执行此操作的帮助。
添加了数据以供理解。我从firebase的一个组件中获取数据，并将其作为道具传递给要测试的InfoViewComponent。预先感谢。

Answer 1

当数据未定义时，您正在尝试访问标题。因此，您要做的就是检查数据是否未定义，然后像下面的

一样访问其字段。

      {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>)}

用Jest Enzyme React测试时无法获得道具

1 个答案: