Question

我需要访问子组件的实例：

const wrapper = shallow(
    <Provider store={store}>
        <CustomForm />
    </Provider>
);

我需要访问CustomForm实例..我该怎么做？

我尝试过：

const instance = wrapper
    .children(0)
    .instance();

Answer 1

如果您的测试需要访问子组件的实例，那么您将需要使用mount()而不是shallow()。

shallow()不会进行完整的DOM渲染，并且如果使用类声明了根元素（请注意functional components never have instances），则会为根元素创建一个实例，但不会为子组件创建实例。

mount()进行完整的DOM渲染，并为使用类声明的所有组件（根或子组件）创建实例。

在您的示例中，您使用chilren(0)访问ReactWrapper，替代方案为childAt(0)或类似find('Component').at(0)的东西。

这是一个简单的工作示例：

import * as React from 'react';
import { mount } from 'enzyme';

class Component extends React.Component {
  componentMethod = () => 'componentMethod called'

  render() { 
    return (
      <span>The Component</span>
    );
  }
}

test('get component instance', () => {
  const component = mount(
    <div>
      <Component />
    </div>
  );
  const componentInstance = component.find('Component').at(0).instance();
  expect(componentInstance.componentMethod()).toBe('componentMethod called'); // PASSES
});

如何检索子组件的实例

1 个答案: