アプリケーションを複数の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 をモックするにはどうすればよいですか?