单元测试参考自我的反应组件答案

【问题标题】：Unit testing react component with reference to self单元测试参考自我的反应组件
【发布时间】：2016-06-17 10:02:47
【问题描述】：

我对 React JSX 组件的测试框架还很陌生，在对组件进行正确渲染的单元测试时，我偶然发现了一个问题。它在其render 方法中包含ref 到this，我不知道如何对其进行单元测试（或忽略它，这样测试就不会失败）。

我正在使用 chai 进行测试。

这是组件：

export default class TopTooltip extends Component {
  render() {
    const { ident, title} = this.props;

    return (
      <Tooltip
        className={`${className} top-banner-tooltip`}
        id={ident}
        ref={this}
      >
        foo
      </Tooltip>
    );
  }
}

...和我的单元测试：

import { expect } from 'chai';
import { Tooltip } from 'react-bootstrap';
import { shallow } from 'enzyme';

describe('TopTooltip', () => {
  describe('renders', () => {
    it('all injected values', () => {
      const t = (<TopTooltip
        title="tooltip"
        ident="xyz"
        className="myClass"
      />);

      const comp = shallow(t);

      expect(comp.find(Tooltip).at(0).node)
       .to.equalJSX(
        <Tooltip
          className="myClass top-banner-tooltip"
          id="xyz"
          ref={t.this}
        >
          <span className="title">tooltip</span>
          foo
        </Tooltip>
      );
    });
  });
});

但是，这失败了，因为引用不符合预期：

expected ref={[object Object]}
but got ref={undefined}

谁能帮我解决这个问题？我什至可以指定在测试期间应忽略此引用。

【问题讨论】：

我会建议你使用 Enzyme (airbnb.io/enzyme/docs/guides/mocha.html) 强大的工具来做一些反应测试。还有一个用于 chai 集成的插件 (github.com/producthunt/chai-enzyme) :)
@MichaelRasoahaingo 我确实使用酶（这就是浅层方法的来源）。您能否更具体地说明在这种情况下我应该以哪种方式应用它？

标签： javascript unit-testing reactjs

【解决方案1】：

你可以试试这样的：

it('should contain <Tooltip/>', () => {
  const component = shallow(<TopTooltip/>);

  expect(component).to.contain(<Tooltip/>);
});


it('should correctly render', () => {
  const component = shallow(<Tooltip className="myClass"/>);

  expect(component).to.have.className('myClass');
  expect(component).to.contain(<span className="title">tooltip</span>);
});

假设你已经正确安装了 chai-enzyme

import chai, { expect } from 'chai';
import chaiEnzyme from 'chai-enzyme';

chai.use(chaiEnzyme());

【讨论】：