如何使用浅渲染测试装饰的React组件 [英] How to test decorated React component with shallow rendering

问题描述

我正在关注本教程： http：/ /reactkungfu.com/2015/07/approaches-to-testing-react-components-an-overview/

尝试学习浅渲染工作。

我有一个更高的订单组件：

I have a higher order component:

import React from 'react';

function withMUI(ComposedComponent) {
  return class withMUI {
    render() {
      return <ComposedComponent {...this.props}/>;
    }
  };
}

和一个组件：

@withMUI
class PlayerProfile extends React.Component {
  render() {
    const { name, avatar } = this.props;
    return (
      <div className="player-profile">
        <div className='profile-name'>{name}</div>
        <div>
          <Avatar src={avatar}/>
        </div>
      </div>
    );
  }
}

和测试：

describe('PlayerProfile component - testing with shallow rendering', () => {
  beforeEach(function() {
   let {TestUtils} = React.addons;

    this.TestUtils = TestUtils;

    this.renderer = TestUtils.createRenderer();
    this.renderer.render(<PlayerProfile name='user'
                                            avatar='avatar'/>);
  });

  it('renders an Avatar', function() {
    let result = this.renderer.getRenderOutput();
    console.log(result);
    expect(result.type).to.equal(PlayerProfile);
  });
});

结果变量持有 this.renderer.getRenderOutput（）

在教程中 result.type 测试如下：

expect（result.type）.toEqual（'div'）;

在我的情况下，如果我记录结果它是：

in my case, if I log the result it is:

日志：对象{类型：函数PlayerProfile（）{..}，..}

所以我改变了我的测试，如：

so I changed my test like:

expect（result.type）.toEqual（PlayerProfile）

现在它给了我这个错误：

now it gives me this error:

断言错误：预期[Function：PlayerProfile]等于[Function ：withMUI]

所以 PlayerProfile 的类型是高阶函数 withMUI 。

So PlayerProfile's type is the higher order function withMUI.

PlayerProfile 用<$ c装饰$ c> withMUI ，使用浅渲染，只渲染 PlayerProfile 组件而不是它的子组件。如此浅的渲染不适用于我假设的装饰组件。

PlayerProfile decorated with withMUI, using shallow rendering, only the PlayerProfile component is rendered and not it's children. So shallow rendering wouldn't work with decorated components I assume.

我的问题是：

为什么教程 result.type 应该是div，但在我的情况下不是。

Why in the tutorial result.type is expected to be a div, but in my case isn't.

如何使用浅层渲染测试用高阶组件修饰的React组件？

How can I test a React component decorated with higher order component using shallow rendering?

推荐答案

你不能。首先让我们稍微去除装饰者：

You can't. First let's slightly desugar the decorator:

let PlayerProfile = withMUI(
    class PlayerProfile extends React.Component {
      // ...
    }
);

withMUI返回不同的类，因此PlayerProfile类仅存在于withMUI的闭包中。

withMUI returns a different class, so the PlayerProfile class only exists in withMUI's closure.

这是一个简化版本：

var withMUI = function(arg){ return null };
var PlayerProfile = withMUI({functionIWantToTest: ...});

您将值传递给函数，它不会回复，您没有价值。

You pass the value to the function, it doesn't give it back, you don't have the value.

解决方案？保持对它的引用。

The solution? Hold a reference to it.

// no decorator here
class PlayerProfile extends React.Component {
  // ...
}

然后我们可以导出包装和未包装的版本组件：

Then we can export both the wrapped and unwrapped versions of the component:

// this must be after the class is declared, unfortunately
export default withMUI(PlayerProfile);
export let undecorated = PlayerProfile;

使用此组件的普通代码不会改变，但您的测试将使用此代码：

The normal code using this component doesn't change, but your tests will use this:

import {undecorated as PlayerProfile} from '../src/PlayerProfile';

---

另一种方法是模拟withMUI函数（x）=> x （身份功能）。这可能会导致奇怪的副作用，需要从测试端完成，因此在添加装饰器时，测试和源可能会失去同步。

---

The alternative is to mock the withMUI function to be (x) => x (the identity function). This may cause weird side effects and needs to be done from the testing side, so your tests and source could fall out of sync as decorators are added.

不使用装饰器似乎喜欢这里的安全选项。

Not using decorators seems like the safe option here.

这篇关于如何使用浅渲染测试装饰的React组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！