Javascript 如何使用酶测试子组件方法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42245215/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to test child component method with Enzyme?
提问by Fomahaut
I have a component like that:
我有一个这样的组件：
<Parent>
<Child/>
</Parent>
and <Child/>component have a method foo. I want test the foomethod but I don't know how to access it. I tried:
和<Child/>组件有一个方法foo。我想测试该foo方法，但我不知道如何访问它。我试过：
mount(<Parent><Child/></Parent>).props().children.foo
or
或者
mount(<Parent><Child/></Parent>).children().foo
but both them are undefined. I can't use .instance()because it's not root. I can't mount <Child/>only because the <Parent>add something (react-router's context.router) on contextand I need them when init <Child/>. Any idea with this?
但他们都是undefined。我不能使用，.instance()因为它不是 root。我不能挂载<Child/>只是因为<Parent>添加了一些东西（react-router's context.router）context并且我在 init 时需要它们<Child/>。有什么想法吗？
回答by rnmalone
I would consider writing tests for only your parent class, and then a separate test file to only test your child.
我会考虑只为你的父类编写测试，然后一个单独的测试文件来只测试你的孩子。
Once you have mounted you component using:
使用以下方法安装组件后：
const component = mount(<Child>);
you then have access to it's methods using:
然后您可以使用以下方法访问它的方法：
component.instance().methodname
You can then do stuff like override it with jest.fn() and test appropriately.
然后你可以做一些事情，比如用 jest.fn() 覆盖它并进行适当的测试。
回答by Pawan Gangwani
I prefer shallow mount over full mount from enzyme.
我更喜欢浅贴装而不是酶的全贴装。
In conjunction with proxyquire to resolve child component (which you want to test) I do
结合proxyquire来解析子组件（你想测试）我做
wrapper.find('Child1').props().propName
And test it.
并测试它。
Or I use shallow
或者我用浅
mount wrapper.dive()
回答by Hymanocnr
This worked for me:
这对我有用：
mount(<Parent><Child/></Parent>).find(Child).instance().foo
回答by andy mccullough
I was able to get a handle on child function like the following, i was looking for the first child to call the function on -
我能够获得如下子函数的句柄，我正在寻找第一个调用该函数的孩子 -
const component = shallow(<Component />);
component.find(Child).first().getNode().props.someChildFunction()
回答by Arthur Almeida
I think your problem is way different from how to test child components.
我认为您的问题与如何测试子组件有很大不同。
My first question is: Why are you checking if a child component has a specific method in the parent's component tests?
我的第一个问题是：为什么要检查子组件在父组件测试中是否具有特定方法？
IMHO you need to have a test specific for this component and, then, in this test you check if the method exists.
恕我直言，您需要针对此组件进行特定测试，然后在此测试中检查该方法是否存在。
Just to not leave without the answer, did you tried .find(Child).instance().foo?
只是为了没有答案就离开，你试过.find(Child).instance().foo吗？
回答by pmaher
I had a similar problem when trying to mock a function on an inner component within a MemoryRouter:
我在尝试模拟 MemoryRouter 内部组件上的函数时遇到了类似的问题：
cont wrapper = mount(<MemoryRouter><AvailabilityButtonWithRouter.WrappedComponent vetId={ vetId } appointment={ availability } /></MemoryRouter>);
I ended up being able to mock the function like so:
我最终能够像这样模拟这个函数：
const mockFn = jest.fn();
wrapper.children(0).children(0).instance().reloadCurrentPage = mockFn;
回答by Anesh
I faced a similar problem and I went through mountAPI by logging. In my use case, my child component(CommonStoresReactions) is wrapped with mobx inject.
我遇到了类似的问题，我通过mount记录来浏览API。在我的用例中，我的子组件（CommonStoresReactions）用 mobx 包装inject。
const jsx = (
<Provider {...stores}>
<CommonStoresReactions>
<div />
</CommonStoresReactions>
</Provider>
)
const wrapper = mount(jsx)
I want to test clearStoresmethod in CommonStoresReactions. Below snippet worked for me.
我想clearStores在CommonStoresReactions. 下面的片段对我有用。
wrapper
.find(CommonStoresReactions)
.instance()
.wrappedInstance.clearStores()
回答by Chris
Enzyme has an option for the mountAPI called wrappingComponent(and wrappingComponentProps) to wrap the mounted object inside another component for providing context, etc.
Enzyme 有一个mount名为wrappingComponent（和wrappingComponentProps）的API选项，可以将挂载的对象包装在另一个组件中，以提供上下文等。
See https://github.com/airbnb/enzyme/blob/master/docs/api/mount.md#mountnode-options--reactwrapper
见https://github.com/airbnb/enzyme/blob/master/docs/api/mount.md#mountnode-options--reactwrapper
