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

Question

我正在为反应组件编写一个简单的测试，使用酶创建一个浅克隆，它在不应该失败的时候失败了。我想看的两件事是它是否呈现正常，以及它是否有道具。这两个都失败了。这是我正在测试的组件和我的规格：

我的组件：

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

我的规格：

import * as React from 'react';
import { shallow } from 'enzyme';
import PortfolioItem from '../../src/js/components/PortfolioItem';

const createShallowPortfolioItem = () => {
  const props = {
    item: {
      ID: 1234567,
      abbreviation: 'rit',
      active: true,
      managementCompany: false,
      name: 'Jorge Joestar',
      targetOperatingReserve: 0.0
    }
  };
  return shallow(<PortfolioItem {...props} />);
};

describe('PortfolioItem', () => {
  it('it contains the class name item', () => {
    const portItem = createShallowPortfolioItem();
    expect(portItem.is('.item')).toBeTruthy();
  });

  it('renders the item name', () => {
    const item = createShallowPortfolioItem();
    expect(item.find('.name').text()).toEqual('Jorge Joestar');
  });
});

Answer 1

"item" class 在 tr 上，您的组件首先 children 不在组件本身上。渲染 PortfolioItem 时，您首先会得到一个 div，然后在该 div 中定义您在渲染中定义的 children。这解释了为什么第一次测试失败。第二个测试失败，因为 shallow 没有创建整个组件，没有 children 所以没有带有 class ".name".

的元素

因此，您可以使用 mount 和 children 对组件进行完整渲染。或者测试其他东西，比如

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

不是很花哨，但如果错误阻止您的组件被渲染，测试将失败。

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

Simple jasmine tests using enzyme is failing.

reactjs

karma-jasmine

enzyme