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

Question

我正在尝试使用 Enzyme 测试一个需要一些 Prop (它没有状态或 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 /> 的包装。 ，并且它只直接从他的 parent 那里收到 3 个 props:<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而不是shallow，完全相同的测试，但我得到了一个大错误react-d3-cloud :

PredictWordCloud Render without problems TypeError: Cannot read property 'getImageData' of null.

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

Answer 1

您可以直接通过组件名称找到您的组件。然后您也可以在子组件中使用 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>');

  });