标签: reactjs-testutils

我的组件中有以下代码

var rect = ReactDOM.findDOMNode(this).getBoundingClientRect();

我在组件中使用d3js并渲染图形.但是当我运行测试时,有任何svg标签.我认为它发生是因为所有rect的字段等于0.

这是浏览器中console.log(rect)的输出:

ClientRect {top:89,right:808,bottom:689,left:8,width:800 ...}

当我运行测试时:

{bottom:0,height:0,left:0,right:0,top:0,width:0}

那么有没有办法设置元素的大小？

什么是目的的任何文档adapter的enzyme测试库。

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

我有一个非常简单的React mixin,它使用jQuery来触发事件

MyMixin = {
  trackStructEvent: function () {
    args = Array.prototype.slice.call(arguments);
    $('body').trigger('myEvent', args);
  }
module.exports = MyMixin

使用browserify将其作为新的组件集的一部分导入主站点.由于拥有这些组件的主站点将始终包含jQuery,我不希望jQuery与browserify一起使用,因为它将被复制.

这在行为方面不是问题 - 但是在运行jest以使用此mixin抛出错误来对组件进行单元测试时会导致问题.

ReferenceError: $ is not defined

我知道我可以通过浏览器包含jQuery来解决这个问题,但这会将2个副本加载到我的网站中.

有没有什么方法可以告诉我的反应组件jQuery已经存在于窗口而不用担心它？

使用JEST进行单元测试,其具有附连到该文档的KEYDOWN听者的成分.

我该怎么测试JEST呢？如何模拟文档上的keydown事件？我需要事件监听器在文档上,因为它应该响应键盘操作而不管焦点元素.

编辑:这里的问题是关于模拟文档或document.body上的事件.所有的例子都是关于一个实际的DOM节点,它工作正常,但文档没有.

目前正在尝试这样做:

TestUtils.Simulate.keyDown(document, {keyCode : 37}); // handler not invoked

我已经设置了一个简单的函数来处理我构建的菜单组件上的鼠标滚轮事件.该组件工作正常,我正在尝试围绕它编写单元测试,这给了我一个问题.

组件处理程序

handleWheel: function (event) {
        (event.deltaY < 0 ) ? this.moveUp() : this.moveDown();

        return false;
}

this.moveUp()/ this.moveDown()只是设置状态 firstIndex

问题是,当我尝试为此功能编写测试时,我无法使其工作.我几乎100%肯定它与我传入的eventDetails对象有关,但我不知道如何正确格式化它.

// set firstIndex = 0
TestUtils.Simulate.scroll(menu, {deltaY: 52});
expect(menu.state.firstIndex).to.equal(1);
// error: expected 0 to be 1

有谁知道如何正确格式化TestUtils.Simulate.Scroll()/知道测试onWheel()的更好方法？

我正在修改这里找到的一个例子:

https://github.com/airbnb/enzyme/blob/master/docs/api/ReactWrapper/setProps.md

class Foo extends React.Component {
    render() {
        return (
            <input className={this.props.name} type="text" value={this.props.name} onChange={()=>{}} />
        );
    }
}

it('should pass and does not', ()=> {
    const wrapper = mount(<Foo name="foo" />);
    expect(wrapper.find('.foo').html()).toBe(`<input class="foo" type="text" value="foo">`);
    wrapper.setProps({ name: 'bar' });
    expect(wrapper.find('.bar').html()).toBe(`<input class="bar" type="text" value="bar">`);
});

Result: Expected '<input class="bar" type="text" value="foo">' to be '<input class="bar" type="text" value="bar">'.

您可以从测试结果中看到className属性在prop更改时已正确更新.但输入的值仍然错误地设置为'foo'.

关于如何断言该值的任何想法已经在接收新道具的组件上正确地更改为输入的值属性？

我在submit使用React,TestUtils和Jest 测试表单事件时遇到了麻烦.

我有一个呈现<form>DOM元素的组件; 同一个组件还有一个处理onSubmit事件并记录语句的方法.我的目标是模拟onSubmit处理程序并声明它被调用.

外形component.cjsx

module.exports = React.createClass

  # Handle form submissions
  handleSubmit: (e) ->
    console.log 'Make async call'

  # Render a form
  render: ->
    <form onSubmit={@handleSubmit}>
      <input type="submit" />
    </form>

__tests __/test-form-component.coffee

jest
  .dontMock '../form-component'

React = require 'react/addons'
TestUtils = React.addons.TestUtils
FormComponent = require '../form-component'

describe 'FormComponent', ->
  it 'creates a log statement upon form submission', ->
    # Render a FormComponent into the dom
    formInstance = TestUtils.renderIntoDocument(<FormComponent />)

    # Mock …

我的React组件有一个suggestionRenderer属性,允许指定组件的呈现方式.例如:

<Autosuggest suggestions={getSuburbs}
             suggestionRenderer={renderLocation} />

function renderLocation(suggestion, input) {
  return (
    <span><strong>{suggestion.slice(0, input.length)}</strong>{suggestion.slice(input.length)}</span>
  );
}

现在,我想写一个开玩笑测试,以确保suggestionRenderer它的工作.检查myElement.getDOMNode().innerHTML揭示:

<span data-reactid=".9.1.$suggestion0.0"><strong data-reactid=".9.1.$suggestion0.0.0">M</strong><span data-reactid=".9.1.$suggestion0.0.1">ill Park</span></span>

这不是特别有用.

有没有办法获得干净的HTML,没有React属性？

我正在尝试使用ReactJS和JSDOM模拟滚动事件.

最初我尝试了以下内容:

var footer = TestUtils.findRenderedDOMComponentWithClass(Component, 'footer');
footer.scrollTop = 500;
TestUtils.Simulate.scroll(footer.getDOMNode());
//I tried this as well, but no luck
//TestUtils.Simulate.scroll(footer);

滚动事件根本不会传播.然后,我手动创建了事件,一切正常:

var evt = document.createEvent("HTMLEvents");
evt.initEvent("scroll", false, true);
element.dispatchEvent(evt);

问题:我是否在使用TestUtils做错了什么？我怎样才能让它发挥作用？

艾伦

我写的组件需要根据是否ctrl按下来改变其行为.

我使用了一个window.onkeydown事件,但是Simulate来自React Test Utils不允许我发送事件window.我也试过window.dispatchEvent(new KeyboardEvent('keydown', { keyCode: 17 }));但是mocha/node无法识别KeyboardEvent.

有没有办法window.onkeydown使用React Test Utils进行测试？如果没有,有没有更好的方法在mocha中为节点做？

以下是一些说明问题的代码:

describe('On Keydown', () => {
    it('fires the event', () => {
        // Component
        const Component = class extends React.Component {
            constructor(props) {
                super(props);
                this.state = { key: false };
                window.addEventListener('keydown', e => this.setState({ key: true }));
                window.addEventListener('keyup', e => this.setState({ key: false }));
            }
            render() {
                return …