检查酶中的后备关键测试答案

【问题标题】：Check fallback key testing in enzyme检查酶中的后备关键测试
【发布时间】：2018-12-17 23:14:18
【问题描述】：

我正在使用 jest 和酶库对 reactjs 中的组件道具进行单元测试。

这就是我需要测试的全部内容，JSON 数据的未定义键 以及该键是否写入的回退...

以下是伪代码：

    export class ActivityItem extends React.Component {
      render() {
        const { activity } = this.props;
        return (
          <div className='item'>
            <p>{activity.item}</p>
          </div>)
        }
     }

JSON 日期：

[{"id": 1,
  "item": "Rose"},
{ "id": 2,
  "item": "Susain"}]

测试用例

  describe('check fallback for text key', () => {
    it('has value in text key', () => {
      wrapper = wrapper.find('ActivityItem')
      expect(wrapper.find('p').length).toBeGreaterThan(1);
    })
  })

在这里我找不到 <p> 标签来检查它的值以进行测试...

【问题讨论】：

wrapper 的初始值是多少？

标签： javascript reactjs unit-testing jestjs enzyme

【解决方案1】：

您需要先对组件进行浅层渲染，然后使用选择器查找元素。

这里有一个可能有帮助的 sn-p。

import { shallow } from 'enzyme';
import ActivityItem from 'wherever-it-is';

describe('check fallback for text key', () => {
  it('has value in text key', () => {
    const wrapper = shallow(<ActivityItem activity={'meow'}/>);
    expect(wrapper.find('.item > p').length).toEqual(1);
  })
})

【讨论】：