Next.jsdynamic()
HOC 组件并不是很容易测试。我现在有两个问题;
- 第一个笑话是未能正确编译动态导入(
require.resolveWeak is not a function
- 似乎是由下一个 babel 插件添加的)
- 其次我无法很好地覆盖
modules
逻辑;看起来它在尝试渲染动态组件时根本没有运行。
假设我们有一个像这样的组件(使用动态导入):
import dynamic from 'next/dynamic';
const ReactSelectNoSSR = dynamic(() => import('../components/select'), {
loading: () => <Input />,
ssr: false
});
export default () => (
<>
<Header />
<ReactSelectNoSSR />
<Footer />
</>
);
Next.js 提供的动态导入支持does not公开一种在 Jest 环境中预加载动态导入组件的方法。
不过,感谢笑话下一个动态 https://github.com/FormidableLabs/jest-next-dynamic,我们可以渲染完整的组件树而不是加载占位符。
你需要添加babel-插件-动态-导入-节点 https://www.npmjs.com/package/babel-plugin-dynamic-import-node给你的.babelrc
像这样。
{
"plugins": ["babel-plugin-dynamic-import-node"]
}
然后,您可以使用preloadAll()
渲染组件而不是加载占位符。
import preloadAll from 'jest-next-dynamic';
import ReactSelect from './select';
beforeAll(async () => {
await preloadAll();
});
???? Source https://leerob.io/blog/things-ive-learned-building-nextjs-apps/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)