javascript - 模拟导入的 Lazy React 组件

Question

这是我的惰性组件:

const LazyBones = React.lazy(() => import('@graveyard/Bones')
  .then(module => ({default: module.BonesComponent}))
export default LazyBones

我像这样导入它:

import Bones from './LazyBones'

export default () => (
<Suspense fallback={<p>Loading bones</p>}>
  <Bones />
</Suspense>
)

在我的测试中我有这样的事情:

import * as LazyBones from './LazyBones';

describe('<BoneYard />', function() {
  let Bones;
  let wrapper;
  beforeEach(function() {
    Bones = sinon.stub(LazyBones, 'default');
    Bones.returns(() => (<div />));
    wrapper = shallow(<BoneYard />);
  });
  afterEach(function() {
    Bones.restore();
  });

  it('renders bones', function() {
    console.log(wrapper)
    expect(wrapper.exists(Bones)).to.equal(true);
  })

})

我期望测试通过，并打印出 console.log:

<Suspense fallback={{...}}>
  <Bones />
</Suspense>

但不是 <Bones />我得到<lazy />并且测试失败。

如何模拟导入的 Lazy React 组件，以便我的简单测试通过？

Answer 1

我不确定这就是您正在寻找的答案，但听起来问题的一部分是肤浅。根据this thread , shallow 不适用于 React.lazy。

但是，在尝试 stub 惰性组件时，mount 也不起作用 - 如果您调试 DOM 输出(使用 console.log(wrapper.debug()))) 你可以看到 Bones 在 DOM 中，但它是真正的(非 stub )版本。

好消息:如果您只是想检查 Bones 是否存在，则根本不必模拟该组件!该测试通过:

import { Bones } from "./Bones";
import BoneYard from "./app";

describe("<BoneYard />", function() {
  it("renders bones", function() {
    const wrapper = mount(<BoneYard />);
    console.log(wrapper.debug());
    expect(wrapper.exists(Bones)).to.equal(true);
    wrapper.unmount();
  });
});

如果您确实需要出于不同原因模拟组件，jest 会让您这样做，但听起来您正在尝试避免 jest。 This thread讨论了 jest 上下文中的一些其他选项(例如 mocking Suspense and lazy ) 也可以与 sinon 一起使用。