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。

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

1 个答案: