Question

所以我知道如果我使用createClass，我可以使用prototype访问辅助函数：

  import React from 'react';

  var ContactUsRoot = React.createClass({

    test: function(){
      return 'yes';
    },
    render: function(){
      return (
        <div id='contact-us-wall'>
          <h6>Contact us</h6>
          <p>Please free feel to contact us with the following contact information</p>
        </div>)
    }

  })
  export default ContactUsRoot;

test.js：

import Contact from 'Contact.js';

describe('Helper functions in contactUsComponent', function(){
  var renderedNode;

  it('should return yes', function(){
        assert.equal(Contact.prototype.test(), 'yes');// look here
  });

但是如何在es6 react组件中访问辅助函数？

class ContactUsRoot extends React.Component{我是否必须创建一个实例然后从该实例访问？虽然听起来不对，但

编辑： @CH白金汉：

在测试中：

  var renderedElement = ReactTestUtils.renderIntoDocument(<Provider store = {store}><GraphRoot/></Provider>);

  april = renderedElement.getDays(3, 2016, "13");

实际组件：

  class GraphRoot extends React.Component{
 [...]

 getDays(month, year, days){
 [...]
 return item;
 }

渲染部分工作得很好，但是当我尝试使用renderedElement.getDays(3, 2016, "13");访问某个方法时，它说它不是一个函数

Answer 1

由于类语法只是以下结构的语法糖（加上一些进一步的语义）...

function ContactUsRoot() {
   ...
}

ContactUsRoot.prototype.test = function() {
    return 'yes';
 }

...你也应该能够使用以下内容访问 test 函数：

ContactUsRoot.prototype.test();

因此，在您的情况下，您应该能够重用现有的测试代码。

Answer 2

您的修改更新：

var theProviderInstance = reactUtils.renderIntoDocument(<Provider><MyComponent/></Provider>);
var theMyComponentInstance = reactUtils.findRenderedComponentWithType(theProviderInstance, MyComponent);
theMyComponentInstance.someInstanceMethod();

// ===== 您将无法通过类原型访问react组件上的该实例方法。

在最真实的React单元测试环境中，您将反应组件呈现为假的DOM，如jsdom，然后使用对它们的引用来进行测试。使用以下实用程序：'react-addons-test-utils'和renderIntoDocument。

但从技术上讲，如果你只是想测试一个简单的方法，并且你不希望它是一个全局的，或者一个导出的函数，那个类已经关闭了，你不在乎它不会您可以真正访问真实的反应环境，然后您可以：const fakeInstance = new ContactUsRoot()和fakeInstance.test()

试图对反应es6组件内的函数进行单元测试

2 个答案: