энзим wrapper.instance () является нулевым для подключенного компонента

Question

Я пытаюсь протестировать подключенный компонент реакции, однако, обернув его, я не могу получить его экземпляр с помощью instance (), он возвращает ноль. для несвязанных компонентов он возвращает экземпляр, в чем разница и как получить экземпляр подключенного компонента?

it('connected component', () => {
  const wrapper = mount(
    <Provider store={store}>
      <BrowserRouter>
        <ConnectedComponent />
      </BrowserRouter>
    </Provider>
  )
  const myComp = wrapper.find(ConnectedComponent)
  expect(myComp).toHaveLength(1) // passes
  console.log(myComp.instance()) //null

})

it('non-connected component', () => {
  const wrapper = mount(
    <Provider store={store}>
      <BrowserRouter>
        <NonConnectedComponent />
      </BrowserRouter>
    </Provider>
  )
  const myComp = wrapper.find(NonConnectedComponent)
  expect(myComp).toHaveLength(1) // passes
  console.log(myComp.instance()) // prints the instancce
})

Answer 1

Проблема в том, что для подключенных компонентов вы экспортируете оболочку Connect, а не сам компонент. Есть несколько вариантов решения этой проблемы.

Вариант 1. Используйте dive(). Обратите внимание, что это доступно только при использовании рендеринга shallow и не будет доступно на mount.

const component = shallow(<ConnectedComponent />).dive(); // dive one level into the Connect wrapper
component.instance(); // the instance will be available

Вариант 2. Экспортируйте ваш компонент отдельно перед его подключением и используйте именованный импорт, чтобы получить его.

// in your component
export class MyComponent extends React.Component {
  ...
}

export default connect()(MyComponent);

// in your tests
import { MyComponent } from './component'; // this will get you non-default export of the component, which is not connected