2

アプリケーションを複数のHOCでラップするHOCであるプロジェクトのモジュールを作成しています(再構成構成機能を使用)。高次コンポーネントが実際にアプリケーションをラップしていることをテストしようとしています。

HOC を含むノード パッケージの例

//withHOC.js
const withHOC = props => WrappedComponent => moreProps => {
    class HOC extends Component {
        //logic
        render () {
            return <WrappedComponent {...moreProps} />
        }
    }
}
export default withHOC

上記の名前空間を持つ HOC を使用して、渡されたコンポーネントをラップする私の HOC

//withWrapper.js
import withHOC from '@HOC/withHOC'
import { compose } from 'recompose'
...etc
const withWrapper = props => WrappedComponent => {
    const innerWrapper => moreProps => (
        <WrappedComponent {...moreProps} />
    );

    const enhance = compose(
        withHOC,
        withHOC1,
        withHOC2,
    );
    return enhance(innerWrapper);
}
export default withWrapper;

withWrapper.js のテスト

//withWrapper.test.js
jest.mock('@HOC/withHOC', () => ({
   withWrapper: (Component) => <div id="test"><Component /></div>
}));
import withWrapper from '@HOC/withHOC' 

const TestApp = () => <div>I am a test element</div>
const EnhancedApp = withWrapper(TestApp)
const wrapper = mount(<EnhancedApp />)
describe('test', () => {
    it('withHOC should wrap the app', () => {
        expect(wrapper.find('#test').length).toEqual(1)
    }
}

アプリケーションを個別にテストしようとしており、各 HOC をモックしてダミーのラッパーを返そうとしています。これは、私が現在テストを行っている場所であり、withWrapper.js の作成部分で「TypeError: is not a function」を取得しています。私はモックの他の方法も試しましたが、エラーが発生し続け、まだどこにも行きません。

インポートされた HOC をモックするにはどうすればよいですか?

4

1 に答える 1