Question

我有一个类似的组件：

<Parent>
  <Child/>
</Parent>

和<Child/>组件有一个方法foo。我想测试foo方法，但我不知道如何访问它。我试过了：

mount(<Parent><Child/></Parent>).props().children.foo

或

mount(<Parent><Child/></Parent>).children().foo

但他们都是undefined。我不能使用.instance()，因为它不是root。我无法挂载<Child/>只是因为<Parent>在context.router上添加了一些内容（react-router的context），而我在初始<Child/>时需要它们。对此有什么想法？

Answer 1

我会考虑只为你的父类编写测试，然后再测试一个单独的测试文件来测试你的孩子。

使用以下方法装载组件后

const component = mount(<Child>);

然后您可以使用以下方法访问它：

component.instance().methodname

然后您可以使用jest.fn（）覆盖它并进行适当的测试。

Answer 2

我更喜欢浅层安装而不是完全装载酶。

与proxyquire一起解决子组件（您要测试）我做了

wrapper.find('Child1').props().propName

并测试它。

或者我使用浅

mount wrapper.dive()

Answer 3

我认为您的问题与如何测试子组件有所不同。

我的第一个问题是：为什么要检查子组件在父组件测试中是否有特定的方法？

恕我直言，您需要针对此组件进行特定测试，然后在此测试中检查该方法是否存在。

为了不在没有答案的情况下离开，您是否尝试过.find(Child).instance().foo？

Answer 4

这对我有用：

mount(<Parent><Child/></Parent>).find(Child).instance().foo

Answer 5

当我试图在MemoryRouter中的内部组件上模拟一个函数时，我遇到了类似的问题：

cont wrapper = mount(<MemoryRouter><AvailabilityButtonWithRouter.WrappedComponent vetId={ vetId  } appointment={ availability } /></MemoryRouter>);

我最终能够像这样模拟这个函数：

const mockFn = jest.fn();    
wrapper.children(0).children(0).instance().reloadCurrentPage = mockFn;

Answer 6

我能够获得如下子函数的句柄，我一直在寻找第一个子函数-

const component = shallow(<Component />);
component.find(Child).first().getNode().props.someChildFunction()

Answer 7

我遇到了类似的问题，并且通过登录使用了mount API。在我的用例中，我的子组件（CommonStoresReactions）用mobx inject包装。

const jsx = (
    <Provider {...stores}>
      <CommonStoresReactions>
        <div />
      </CommonStoresReactions>
    </Provider>
)
const wrapper = mount(jsx)

我想测试clearStores中的CommonStoresReactions方法。下面的代码段对我有用。

wrapper
      .find(CommonStoresReactions)
      .instance()
      .wrappedInstance.clearStores()

Answer 8

酶有一个名为mount（和wrappingComponent）的wrappingComponentProps API选项，可以将已安装的对象包装在另一个提供上下文的组件中。

请参见https://github.com/airbnb/enzyme/blob/master/docs/api/mount.md#mountnode-options--reactwrapper

Answer 9

我设法使用dive

解决了这个问题

wrapper.dive().props().propName

Answer 10

含酶：

mount(<Parent><Child/></Parent>).childAt(0).instance().foo

有充分的理由访问孩子并调用方法。如果父级是肤浅的并且子级具有一致的接口，则可以在不知道它是哪个子级的情况下调用方法，测试所有子级都具有正确的接口，签名等。

Answer 11

我发现的最好方法是使用浅层包装器的 dive 方法。这是文档：enzyme dive doc

请记住，如果您的父组件使用像 mount 这样的完全渲染，那么 react 包装器本身没有潜水方法，因此您必须使用浅渲染。

这是一个例子：

let instance, child, diveChild;
describe('Test Parent child Child component', () => {
  beforeEach(() => {
    wrapper = shallow(<Parent {...props} />);
    child = wrapper.find('Child');
    diveChild = child.dive();
    console.log(diveChild.instance());
  });

  test('Child get mounted', () => {
    expect(child.exists()).toBeTruthy();
    expect(child.debug()).toMatchSnapshot();
  });
});

如何用酶测试子成分方法？

11 个答案: