How to test decorated components?

Hi! I have problem with testing decorated by translate components. Just simple example:

import React, { PropTypes } from 'react';
import { translate } from 'react-i18next';
import ProductBadge from './ProductBadge';

const ProductBadgeNew = ({ product, t }) => (
  product.is_label_new
    ? <ProductBadge text={t('vendor.badges.new')} status="sold" />
    : <span />
);

export default translate(ProductBadgeNew);

First of all when we test components, we render them into document via:

import { renderIntoDocument } from 'react-addons-test-utils';
import ProductBadgeNew from '../../ProductBadgeNew';

describe('[Component] ProductBadgeNew', () => {
  it('should render without errors when there aren\'t any props', () => {
    const component = renderIntoDocument(
      <ProductBadgeNew />
    );

    expect(component).to.be.an('object');
  });
});

But we have been decorated ProductBadgeNew component with translate, and here component variable contains Translate component which decorates ProductBadgeNew. And I can’t get props for my ProductBadgeNew. I’ve found one interesting solution https://github.com/ghengeveld/redux/blob/a68768ff8d6a4fbe7b8f6a06a8cf9b99a54aefb0/docs/recipes/WritingTests.md#testing-decorated-react-components The code after changes is:

import React, { PropTypes } from 'react';
import { translate } from 'react-i18next';
import ProductBadge from './ProductBadge';

export const ProductBadgeNew = ({ product, t }) => (
  product.is_label_new
    ? <ProductBadge text={t('vendor.badges.new')} status="sold" />
    : <span />
);

export default translate(ProductBadgeNew);

import { ProductBadgeNew } from '../../ProductBadgeNew';

describe('[Component] ProductBadgeNew', () => {
  it('should render without errors when there aren\'t any props', () => {
    const component = renderIntoDocument(
      <ProductBadgeNew />
    );

    expect(component).to.be.an('object');
  });
});

Now component variable contains our vanilla component without any decorations. BUT!😃 Inside component we use t function which is passed via props and of course we don’t have it now. How can I fix my testing workflow with your decorators? Thanks

[jamesvclements]

Stumbled on this when dealing with the same issue. We found the easiest solution to be mocking the translate function of react-i18next:

jest.mock('react-i18next', () => ({
  // this mock makes sure any components using the translate HoC receive the t function as a prop
  translate: () => Component => props => <Component t={() => ''} {...props} />,
}));

This helps address @sergeylaptev 's comment about complex components with child components also using the HoC

[jamuhl]

what we do for testing is:

export function MyComponent(props) {  ...  };

export default translated(MyComponent);

for test we import { MyComponent } from './MyComponent'; -> no hoc just pure component to test