即使存在匹配值，Jest/Jasmine .toContain() 也会失败

Question

我正在编写一个带有 Button 组件的简单 React 应用程序，如下所示：

import React, { Component } from 'react';
// shim to find stuff
Array.prototype.contains = function (needle) {
  for (var i = 0; i < this.length; i++) {
       if (this[i] == needle) return true;
   }
   return false;
};

class Button extends Component {
  propTypes: {
    text: React.PropTypes.string.isRequired,
    modifiers: React.PropTypes.array
  }
  render() {
    return(
      <span className={this.displayModifiers()}>{this.props.text}</span>
    );
  }
  displayModifiers() {
    const modifiers = this.props.modifiers || ["default"];
    if (modifiers.contains("default") ||
      modifiers.contains("danger")  ||
      modifiers.contains("success")) {
      // do nothing
    } else {
      // add default
      modifiers.push("defualt");
    }
    var classNames = "btn"
    for (var i = 0; i < modifiers.length; i++) {
      classNames += " btn-" + modifiers[i]
    }
    return(classNames);
  }
}

export default Button;

然后我写了这个来测试它：

it("contains the correct bootstrap classes", () => {
  expect(mount(<Button modifiers={["flat"]}/>).html()).toContain("<span class=\"btn btn-flat btn-default\"></span>");
});

该代码应该可以通过，但我收到以下错误消息：

expect(string).toContain(value)

Expected string:
  "<span class=\"btn btn-flat btn-defualt\"></span>"
To contain value:
  "<span class=\"btn btn-flat btn-default\"></span>"

  at Object.it (src\__tests__\Button.test.js:42:293)

任何想法为什么这没有通过？

Answer 1

来自文档：

当您想要检查项目是否在列表中时，请使用 .toContain。

要测试字符串，您应该使用toBe 或toEqual

it("contains the correct bootstrap classes", () => {
  expect(mount(<Button modifiers={["flat"]}/>).html()).toBe("<span class=\"btn btn-flat btn-default\"></span>");
});

但是有更好的方法来测试输出渲染的组件：snapshots。

it("contains the correct bootstrap classes", () => {
  expect(mount(<Button modifiers={["flat"]}/>).html()).toMatchSnapshot();
});

请注意，您需要enzymeToJson 才能使用酶进行快照测试。