Question

我正在尝试使用Enzyme来测试一个带有一些道具（它没有状态或redux连接）的简单组件，它适用于像<div />等普通元素，但是当我尝试测试子组件呈现的元素是否存在时，它会失败。

我正在尝试使用mount，但它给我带来了很多错误，我是新手，所以，这是我的代码：

import React, { Component } from 'react';
import WordCloud from 'react-d3-cloud';

class PredictWordCloud extends Component {
  render() {
    const fontSizeMapper = word => Math.log2(word.value) * 3.3;
    const { size, data, show } = this.props;

    if (!show)
      return <h3 className='text-muted text-center'>No data</h3>

    return (
      <section id='predict-word-cloud'>
        <div className='text-center'>
          <WordCloud
            data={data}
            fontSizeMapper={fontSizeMapper}
            width={size}
            height={300} />
        </div>
      </section>
    )
  }
}

export default PredictWordCloud;

它只是<WordCloud />的一个包装器，它只是直接从他的父母那里收到3个道具：<PredictWordCloud data={wordcloud} size={cloudSize} show={wordcloud ? true : false} />，其他任何东西。

现在测试非常简单：

import React from 'react';
import { shallow } from 'enzyme';
import PredictWordCloud from '../../components/PredictWordCloud.component';
import cloudData from '../../helpers/cloudData.json';

describe('<PredictWordCloud />', () => {
  let wrapper;

  beforeEach(() => {
     wrapper = shallow(<PredictWordCloud data={cloudData} size={600} show={true} />)
  });

  it('Render without problems', () => {
     const selector = wrapper.find('#predict-word-cloud');
     expect(selector.exists()).toBeTruthy();
  });
});

目前已传递，但如果我们将选择器更改为：const selector = wrapper.find('#predict-word-cloud svg'); svg标记是<Wordcloud />组件的返回，则测试会失败，因为断言返回false。

我尝试使用mount而不是浅，完全相同的测试，但是我得到了一个很大的错误react-d3-cloud：

PredictWordCloud渲染没有问题TypeError：无法读取null的属性'getImageData'。

这特别奇怪，因为它恰好发生在测试环境中，UI和所有行为在浏览器中完美运行。

Answer 1

您可以通过组件名称直接找到您的组件。然后你也可以在你的子组件中使用find。

e.g

  it('Render without problems', () => {
     const selector = wrapper.find('WordCloud').first();
     expect(selector.find('svg')).to.have.length(1);

  });

或您也可以通过

比较生成的html结构

  it('Render without problems', () => {
     const selector = wrapper.find('WordCloud').first();
     expect(selector.html()).to.equal('<svg> Just an example </svg>');

  });

使用Enzymejs测试渲染子组件

1 个答案: