React js - 如何在测试组件时模拟Context [英] React js - How to mock Context when testing component

问题描述

我正在尝试测试从根组件继承上下文的组件，而不从根目录下加载/呈现所有内容。我已经尝试并搜索了如何模拟上下文但没有找到任何内容的示例（至少不使用jest）。

I'm trying to test a component which inherits context from a root component, without loading/rendering everything from the root down. I've tried and searched for examples on how to mock the context but can't find anything (at least that doesn't use jest).

这是一个简化的例子我想要实现的目标。

Here's a simplified example of what I'm trying to achieve.

有没有一种简单的方法可以模拟reactEl.context进行测试？

Is there a simple way I can mock reactEl.context for the test?

/**
* Root Element that sets up & shares context
*/
class Root extends Component {
  getChildContext() {
    return { 
      language: { text: 'A String'} 
    };
  }

  render() {
    return (
      <div>
        <ElWithContext />
      </div>
    );
  }
}

Root.childContextTypes = { language: React.PropTypes.object };

/**
 * Child Element which uses context
 */
class ElWithContext extends React.Component{
  render() {
    const {language} = this.context;
    return <p>{language.text}</p>
  }
}

ElWithContext.contextTypes = { language: React.PropTypes.object }



/**
 * Example test where context is unavailable.
 */
let el = React.createElement(ElWithContext)

element = TestUtils.renderIntoDocument(el);
// ERROR: undefined is not an object (evaluating 'language.text')

describe("ElWithContext", () => {
  it('should contain textContent from context', () => {
    const node = ReactDOM.findDOMNode(element);
    expect(node.textContent).to.equal('A String');
  });
})

推荐答案

我去了与你所做的相同的问题，并找到了两种方法。

I went into the same issue as you did and found out two ways of doing it.

第一个是你自己的方式的基本模仿：在我的组件周围创建一个包装器用动态上下文注入它。我把下面的源代码放在那些感兴趣的人身上，因为它与你的例子不同，它是ES6。但它只是为了展示如何在ES6中完成它并且我不推荐任何人使用它（我自己没有亲自测试过）。

The first one is a basic copycat of your own way: Create a wrapper around my component and inject it with a dynamic context. I put the source code below for those interested, because it's ES6 unlike your example. But it's just to show how it would be done in ES6 and I do NOT recommend anyone using it (I haven't actually tested it myself).

src / testUtils / mockWithContext.js

import React, { Component } from 'react';
import wrapDisplayName from 'recompose/wrapDisplayName';
import hoistStatics from 'recompose/hoistStatics';

export const defaultContext = {
  permissions: [

  ],
  user: {
    id: '1',
    display_name: 'Default user',
    email: '<your.email>[e-mail]', // Trick with "+" for infinite aliases using gmail.
    username: 'default_user',
    created: '2016-08-01T15:50:13.246Z',
  },
};

export const defaultContextType = {
  permissions: React.PropTypes.array,
  user: React.PropTypes.shape({
    id: React.PropTypes.string.isRequired,
    display_name: React.PropTypes.string.isRequired,
    email: React.PropTypes.string.isRequired,
    username: React.PropTypes.string.isRequired,
    created: React.PropTypes.string.isRequired,
  }),
};

/**
 * HOC for context
 */
const withContext = ({ context = defaultContext, contextType = defaultContextType }) => (WrappedComponent) => {
  class WithContext extends Component {
    getChildContext() {
      return context;
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  }

  WithContext.displayName = wrapDisplayName(WrappedComponent, 'WithContext');
  WithContext.WrappedComponent = WrappedComponent;
  WithContext.childContextTypes = contextType;

  return WithContext;
};

export default hoistStatics(withContext);

---

正如我所说，我写了，但没有测试它是因为我在尝试为这个模拟编写测试时找到了更好的上下文注入方法。

使用Enzyme库，它绝对是为了支持React组件测试而构建的，有能力浅 / mount / static 渲染组件，用于测试目的。并且每个方法都允许第二个参数：上下文。

Using Enzyme library, which is definitely built to support React components testing, there is the ability to shallow/mount/static render your component, for testing purpose. And each of these methods allow a second argument: the context.

SimpleComponent.js

const SimpleComponent = React.createClass({
  contextTypes: {
    name: React.PropTypes.string,
  },
  render() {
    return <div>{this.context.name}</div>;
  },
});

SimpleComponent.test.js

const context = { name: 'foo' };
const wrapper = mount(<SimpleComponent />, { context });
expect(wrapper.text()).to.equal('foo');
wrapper.setContext({ name: 'bar' });
expect(wrapper.text()).to.equal('bar');
wrapper.setContext({ name: 'baz' });
expect(wrapper.text()).to.equal('baz');

非常简单。我还没有使用它，但它看起来像我（和你）想要做的。我想我只需将自己的实现抛给垃圾。

Pretty straight-forward. I didn't use it yet but it looks like what I (and you) wanted to do. I guess I'll just have to throw my own implementation to the garbage.

http://airbnb.io/enzyme/docs/api/ReactWrapper/setContext.html

这篇关于React js - 如何在测试组件时模拟Context的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！