javascript - 如何使用浅层渲染测试装饰后的 React 组件

Question

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

尝试了解“浅层渲染”的工作原理。

我有一个更高阶的组件:

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);
  });
});

result 变量保存 this.renderer.getRenderOutput()

在教程中，result.type 的测试如下:

expect(result.type).toEqual('div');

就我而言，如果我记录结果，它是:

日志:对象{类型:函数 PlayerProfile() {..}, .. }

所以我改变了我的测试:

expect(result.type).toEqual(PlayerProfile)

现在它给了我这个错误:

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

因此，PlayerProfile 的类型是高阶函数 withMUI。

PlayerProfile 用 withMUI 装饰，使用浅层渲染，仅渲染 PlayerProfile 组件，而不渲染它的子组件。我认为浅层渲染不适用于装饰组件。

我的问题是:

为什么在教程中 result.type 应该是一个 div，但在我的例子中不是。

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

Answer 1

你不能。首先让我们稍微对装饰器进行脱糖处理:

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

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

这是一个简化版本:

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

您将值传递给函数，它不会将其返回，您没有该值。

解决方案？保留对其的引用。

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

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

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

使用此组件的正常代码不会改变，但您的测试将使用此组件:

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

<小时/>

另一种方法是将 withMUI 函数模拟为 (x) => x (恒等函数)。这可能会导致奇怪的副作用，并且需要从测试端完成，因此当添加装饰器时，您的测试和源可能会不同步。

不使用装饰器似乎是安全的选择。