Question

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

我正在使用 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}

任何人都可以帮我解决这个问题吗？我甚至可以指定在测试期间应忽略此引用。

Answer 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());

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

1 个答案: