React js - Как издеваться над контекстом при тестировании компонента

Я пытаюсь проверить компонент, который наследует контекст от корневого компонента, без загрузки/рендеринга всего от корня вниз. Я пробовал и искал примеры того, как издеваться над контекстом, но не может найти ничего (по крайней мере, это не использует шутки).

Вот упрощенный пример того, чего я пытаюсь достичь.

Есть ли простой способ, с помощью которого я могу moker reactEl.context для теста?

/**
* 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');
  });
})

Ответ 1

Я вошел в ту же проблему, что и вы, и узнал два способа сделать это.

Первый - базовый подражатель по-своему: создайте оболочку вокруг моего компонента и добавьте ее в динамический контекст. Я помещаю исходный код ниже для тех, кого интересует, потому что это ES6 в отличие от вашего примера. Но это просто, чтобы показать, как это будет сделано в ES6 и Я НЕ рекомендую никому его использовать (я сам его не тестировал сам).

ЦСИ/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>[email protected]', // 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);

Как я уже сказал, я написал его, но не тестировал его, потому что при попытке написать тесты для этого макета я нашел гораздо лучший способ выполнения контекстного ввода.

Использование библиотеки ферментов, которая определенно построена для поддержки тестирования компонентов React, позволяет shallow/mount/static визуализировать ваш компонент для целей тестирования. И каждый из этих методов допускает второй аргумент: контекст.

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

Довольно прямолинейный. Я еще не использовал его, но похоже, что я (и вы) хотел сделать. Полагаю, мне просто нужно бросить свою собственную реализацию в мусор.

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

Ответ 2

Я пошел с решением создания оберточного компонента с контекстом. Не уверен, что это отличный подход, но сейчас работает для меня:

/**
* Helper function to wrap component with a component that has context 
*/
function wrapWithContext(context, contextTypes, children, React){

    const wrapperWithContext = React.createClass({
        childContextTypes: contextTypes,
        getChildContext: function() { return context },
        render: function() { return React.createElement('div', null, children) }
    });

  return React.createElement(wrapperWithContext);
}

/**
* Usage
*/

// in setup function of test framework
const el = React.createElement(ElWithContext);

const context = { language: { text: 'A String' } };
const contextTypes = { language: React.PropTypes.object };
const wrapper = wrapWithContext(context, contextTypes, [el], React);
const ElWithContext = TestUtils.renderIntoDocument(wrapper);

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