javascript - 使用Enzymejs测试渲染子组件

我正在尝试使用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而不是浅表，完全一样的测试，但是我收到了一个很大的错误，原因是fomr react-d3-cloud：


  PredictWordCloud Render不会出现问题TypeError：无法读取null的属性“ getImageData”。


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

最佳答案

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

例如

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

  });

关于javascript - 使用Enzymejs测试渲染子组件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42492244/