Question

我正在编写一个简单的测试反应组件使用酶来创建一个浅层克隆，当它不应该是失败时。我试图看到的两件事是，如果它变好了，如果它有一个道具。这两个都失败了。这是我正在测试的组件和我的规范：

我的组件：

192.168.0.108:6379>

我的规格：

import * as React from 'react';

export default class PortfolioItem extends React.Component<any, any> {
  render() {
    // Deconstructing the items obj into these consts
    const {
      ID,
      abbreviation,
      active,
      managementCompany,
      name,
      targetOperatingReserve
    } = this.props.item;
    return (
      <tr className='.item'>
        <td className='id' >{ID}</td>
        <td className='abv' >{abbreviation}</td>
        <td className='active' >{active}</td>
        <td className='manComp' >{managementCompany}</td>
        <td className='name' >{name}</td>
        <td className='tor' >{targetOperatingReserve}</td>
      </tr>
    );
  }
}

Answer 1

＆＃34;项目＆＃34; class在tr上，你的组件第一个孩子不在组件本身上。渲染PortfolioItem时，您首先会有一个div，并在div中包含您在渲染中定义的子项。这就解释了为什么第一次测试失败。第二次测试失败，因为shallow没有创建整个组件，没有子节点，因此没有带有类＆＃34; .name＆＃34;的元素。

因此，您可以使用mount对子组件进行完整的组件渲染。或者测试一下像

这样的东西

expect(portItem).toEqual(jasmine.anything())

不是很花哨，但是如果错误导致组件被渲染，则测试将失败。

使用酶的简单茉莉花测试失败了。

1 个答案: