当用茉莉花和酶测试反应成分时,预期是假的

时间:2016-10-21 17:13:50

标签: unit-testing reactjs jasmine jsdom enzyme

当我将茉莉花作为gulp任务运行时,测试似乎运行良好,尽管第一个被认为是失败的。我不确定问题出在哪里。

反应组件

import React, { PropTypes } from 'react';

const propTypes = {};

const defaultProps = {};

class Foo extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className="foo"> </div>
    );
  }
}

Foo.propTypes = propTypes;
Foo.defaultProps = defaultProps;

export default Foo;

规范文件

import React from 'react';
import { shallow, mount, render } from 'enzyme';
import Foo from './foo.react';
import jsDom from 'jsdom';

global.document = jsDom.jsdom('');
global.window = document.defaultView;
Object.keys(document.defaultView).forEach((property) => {
  if (typeof global[property] === 'undefined') {
    global[property] = document.defaultView[property];
  }
});

global.navigator = {
  userAgent: 'node.js'
};


describe("A suite", function() {
  it("contains spec with an expectation", function() {
    console.log(shallow(<Foo />));
    expect(shallow(<Foo />).contains(<div className="foo" />)).toBe(true);//.toBe(true)
  });

  it("contains spec with an expectation", function() {
    expect(shallow(<Foo />).is('.foo')).toBe(true);
  });

  it("contains spec with an expectation", function() {
    expect(mount(<Foo />).find('.foo').length).toBe(1);
  });
});

结果

enter image description here

2 个答案:

答案 0 :(得分:0)

发现我必须改变我的回归 public class MyViewGroup extends ViewGroup { @Override protected void onFinishInflate() { super.onFinishInflate(); doMyInitialization(); } } 代替<div className="foo" />

然后测试将通过。

还不明白他们为什么会有所不同。

答案 1 :(得分:0)

我认为问题可能出在<div className="foo"> </div>

中的空白处

contains检查完全匹配,空标记与包含空格字符的同一标记不同。有关elem.html()

的可能解决方法,另请参阅此讨论