小编ale*_*gel的帖子

我正在使用moment.js在我的React组件的辅助文件中执行大部分日期逻辑,但是我还没弄清楚如何在Jest a sinon.useFakeTimers()中模拟日期.

Jest文档只讨论定时器函数,如setTimeout,setInveral等,但没有帮助设置日期,然后检查我的日期函数是否执行他们想要做的事情.

这是我的一些JS文件:

var moment = require('moment');

var DateHelper = {

  DATE_FORMAT: 'MMMM D',
  API_DATE_FORMAT: 'YYYY-MM-DD',

  formatDate: function(date) {
    return date.format(this.DATE_FORMAT);
  },

  isDateToday: function(date) {
    return this.formatDate(date) === this.formatDate(moment());
  }
};

module.exports = DateHelper;

这是我用Jest设置的:

jest.dontMock('../../../dashboard/calendar/date-helper')
    .dontMock('moment');

describe('DateHelper', function() {
  var DateHelper = require('../../../dashboard/calendar/date-helper'),
      moment = require('moment'),
      DATE_FORMAT = 'MMMM D';

  describe('formatDate', function() {

    it('should return the date formatted as DATE_FORMAT', function() {
      var unformattedDate = moment('2014-05-12T00:00:00.000Z'),
          formattedDate = DateHelper.formatDate(unformattedDate);

      expect(formattedDate).toEqual('May 12');
    });

  });

  describe('isDateToday', function() {

    it('should …

我一直在为我的所有事件(以及其他所有事件)编写测试但是我对如何测试this.props.onClick(this)在子组件上调用感到茫然.

我的子组件具有以下代码:

closeModal: function() {
  this.props.onClick(this);
},

render: function() {
  return (
    <i className="close-icon" onClick={this.closeModal}></i>
  )
}

并且父母正在这样听:

onCloseModal: function() {
  this.replaceState({
    modalStatus: 'hidden'
  });
},

render: function() {
  return (
    <QuestionModal modalStatus={this.state.modalStatus} onClick={this.onCloseModal} />
  )
}

我知道如何测试父母的点击事件,我知道如何在测试中调用孩子的按钮点击事件,但我不确定我应该准确测试什么.

如果我使用了Sinon和Jasmine,我会将closeModal方法存根并检查它是否被调用.我可以用Jest做到这一点,如果是这样,究竟是怎么回事？

UPDATE

我已经尝试过根据@ PhilVarg的答案编写测试但我没有达到很远,因为我无法模拟closeModal.

这是我的测试:

      var closeIcon,
          myMock = jest.genMockFunction();

      form = TestUtils.renderIntoDocument(
        <QuestionForm />
      );
      form.closeModal = myMock;

      closeIcon = TestUtils.findRenderedDOMComponentWithClass(form, 'close-icon');

      TestUtils.Simulate.click(closeIcon);

      expect(form.closeModal).toBeCalled();

调用预期函数的测试错误.并且closeModal没有被模拟但仍然运行(我现在有一个控制台日志).我整个下午一直在这里,但一直都没能弄清楚.任何帮助将非常感激.

我正在尝试测试一个React组件,它需要与app.js分开的react-router.

我有一个使用mixin Router.Navigation进行重定向的组件,如下所示:

var React = require('react'),
    Router = require('react-router');

var Searchbar = React.createClass({

  mixins : [Router.Navigation],

  searchTerm: function(e) {
    if (e.keyCode !== 13) {
      return;
    }

    this.context.router.transitionTo('/someRoute/search?term=' + e.currentTarget.value)
  },

  render: function() {
    return (
      <div className="searchbar-container">
        <input type="search" placeholder="Search..." onKeyDown={this.searchTerm} />
      </div>
    )
  }
});

module.exports = Searchbar;

我试着为此写一个测试,但碰到了一堵墙.除了我无法测试转换以便按预期工作的事实,我在我的Jest测试中也遇到了这个错误消息:

警告:失败的上下文类型:router未指定必需的上下文Searchbar.

有谁知道如何摆脱警告和奖金问题,我如何测试转换是否按预期工作？

我已经在这里和Github上的这个对话做了研究:https://github.com/rackt/react-router/issues/400是我发现的最接近问题的.看起来我需要单独导出路由器,但这似乎是一个很大的开销,只是运行组件测试没有警告la https://github.com/rackt/react-router/blob/master/docs/guides/ testing.md

这真的是要走的路吗？

我基于Mike Bostock的Node-link Tree在D3.js中创建了一个Tree.我在Mike的树中看到的问题是,当没有足够的空间而不是扩展链接以留出一些空间时,文本标签会重叠/重叠圆形节点.

作为新用户,我不允许上传图像,因此这里是Mike's Tree 的链接,您可以在其中看到前面节点的标签与以下节点重叠.

我通过检测文本的像素长度尝试了各种方法来解决问题:

d3.select('.nodeText').node().getComputedTextLength();

但是,这仅在我渲染页面时,在渲染之前需要最长文本项的长度时才有效.

在渲染之前获取最长的文本项:

nodes = tree.nodes(root).reverse();

var longest = nodes.reduce(function (a, b) { 
  return a.label.length > b.label.length ? a : b; 
});

node = vis.selectAll('g.node').data(nodes, function(d, i){
  return d.id || (d.id = ++i); 
});

nodes.forEach(function(d) {
  d.y = (longest.label.length + 200);
});

使用时只返回字符串长度

d.y = (d.depth * 200);

使每个链接都是静态长度,并且在新节点打开或关闭时不会调整大小.

有没有办法避免这种重叠？如果是这样,那么最好的方法是保持树的动态结构？

我可以提出3种可能的解决方案但不是那么简单:

1. 检测标签长度并使用省略号覆盖子节点.(这会使标签的可读性降低)
2. 通过检测标签长度并告知链接进行相应调整来动态缩放布局.(这将是最好的,但似乎真的很难
3. 缩放svg元素并在标签开始运行时使用滚动条.(不确定这是可能的,因为我一直在假设SVG需要设置高度和宽度).

假设我有 2 个组件。包含子级的父级。

子组件是一个像这样的按钮：

var React = require('react');

var ChildButton = React.createClass({
  onSubmitAnswer: function(e) {
    this.props.onClick(this);
  },

  render: function() {
    return (
      <div className={this.props.visibility}>
          <button onClick={this.onSubmitAnswer}>Click Me</button>
      </div>
    )
  }

});

module.exports = ChildButton;

它存在于它的父级中，如下所示：

var React = require('react'),
    ChildButton = require('./face-submit-button');

var ParentComponent = React.createClass({
  onButtonSubmit: function() {
    //Something happens here
  },

  render: function() {
    return (
      <div>
        //Some more components
        <ChildButton text="Submit" onClick={this.onButtonSubmit} />
      </div>
    )
  }

});

module.exports = ParentComponent;

到现在为止还挺好。一切都在 UI 中按预期工作。但是我在使用 TestUtils.Simulate.click() 的 Jest 测试中遇到了一些问题。 …