テスト専用のデコレータを無視する方法はありますか？

Question

私は現在、reactjsアプリケーションのために書かれた単体テストのデコレータに関する問題に取り組んでいます。

私たちの反応コンポーネントにデコレータを導入することで、あまりにも多くの定型化を避ける方法が大好きです。コンポーネントはきれいに見え、コードはこれで読みやすくなります。 しかし、私はアプリケーションの文脈で必須のテストである単体テストを実行することができないので、今このナンセンスデコレータをあまりにも多く刺激しました。下記のコード：

@translate(['common']) 
export default class MyComponent extends React.Component { 
... 
componentDidMount() { 
    // Ajax call on success setting the state this.setState({ myData: response.data }) 
} 
... 
} 

このコンポーネントの状態をテストしたいと、私はajaxの成功の応答から受け取りました。

私のテストは、私は私のコンポーネントから@translateを（[「普通」]）を削除した場合、テストの上

describe('<MyComponent />', function() { 
sinon.stub(dataService, 'fetchData') 
    callsFake(function() { 
    return Promise.resolve(['one', 'two', 'three']) 
    }); 
it('should match the state with data fetched', function() { 
    const wrapper = mount(<MyComponent />); 
    return dataService.fetchData() 
    .then(function() { 
    expect(wrapper.state('myData')).to.have.lengthOf(3); 
    }); 
}); 
}); 

がうまく機能し、以下のように見えますが、存在する場合は動作しません。 私はtranslateがHOCであることを知っています。私はそれに応じてテストを調整する必要がありますが、私はすべてを試したと信じて、何も私のために働く。 また、コンポーネント1で複数のエクスポートを追加して純粋でもう1つは翻訳でラップすることで、これを実現する方法もありますが、このソリューションでも私のソースコードにあるようなデコレータを削除する必要があります。

テストを実行しているときにソースコードからこれらのデコレータを無視またはスキップするようにウェブパックを設定する方法はありますか？

Answer 1

デコレータはyou can only use decorators on an export when exporting a classので、しかし、あなたはかなり@装飾構文を失い、あなたはクラス宣言とクラスの装飾を分離することができますHigher-Order Functionsのためだけの砂糖ですので：あなたは今、インポートすることができ、あなたのテストでは

export class MyComponent extends React.Component { 
... 
componentDidMount() { 
    // Ajax call on success setting the state this.setState({ myData: response.data }) 
} 
... 
} 

export default translate(['common'])(MyComponent) 

基礎となる、「未修飾」クラス：

import {MyComponent} from '...' 

だから我々は無視するかスキップするために私たちのWebPACKを設定することができますどのような方法があります私のテストを実行している間、私のソースコードのこれらのデコレータ？

私は、webpackがクラスの装飾を無視する方法はないと信じています。 はで、ファイルを解析してデコレーションステートメントを削除したプラグインを作成することは可能ですが、これは残酷であり、アプリケーション開発およびビルドプロセスの他の部分に多大な影響を与えます。