Экспорт чистого функционального компонента без декораторов

Question

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

Итак, как я мог это сделать:

<code>import React, { Component } from 'react';
import { connect } from 'react-redux';

export class Header extends Component {
    render(){
        return <pre>Header

} } экспорт по умолчанию connect () (заголовок);

С этим компонентом (экспорт в начале не работает, он все еще экспортирует подключенный компонент)

<code>export let Header = props => {
    render(){
        return <pre>Header

} } Заголовок = connect () (Заголовок); Заголовок экспорта по умолчанию;

Answer 1

Используйте другую переменную для вашего подключенного компонента в виде следующего кода:

<code>export let Header = props => {
    render(){
        return <pre>Header

}} let HeaderConnected = connect () (Header);экспорт по умолчанию HeaderConnected;

Теперь вы можете свободно импортировать Header, не используя connect()

Answer 2

Это можно сделать даже без изменения экспорта по умолчанию:

<code>export let Header = props => {
    render(){
        return <pre>Header

} } экспорт по умолчанию connect () (заголовок);

Возможно, нет необходимости экспортировать исходный компонент только для connect, поскольку большинство хорошо разработанных HOC предоставляют исходный компонент:

import Header from '...';
const OriginalHeader = Header.WrappedComponent;