фермент wrapper.instance () имеет значение NULL для подключенного компонента

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

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
})

reactjs jestjs enzyme
person Fuseques    schedule 04.07.2018    source источник
comment
Вы пробовали использовать dive (), а не instance ()?   -  person Paolo Dell'Aguzzo    schedule 04.07.2018
comment
Я получаю, что myComp.dive не является функцией, также не могу найти функцию погружения в API ReactWrapper здесь: github.com/airbnb/enzyme/blob/master/docs/api/mount.md.   -  person Fuseques    schedule 04.07.2018
comment
Возможно, эта проблема поможет вам github.com/airbnb/enzyme/issues/1002   -  person Paolo Dell'Aguzzo    schedule 04.07.2018
comment
я прочитал это перед тем как открыть эту тему, все равно спасибо   -  person Fuseques    schedule 04.07.2018
comment
Вы пробовали получить его по имени, а не по самой переменной? const myComp = wrapper.find('NonConnectedComponent') (обратите внимание на кавычки вокруг имени). Не самое красивое решение, но хорошее решение, если работает.   -  person András Geiszl    schedule 12.10.2018

Ответы (1)


arrow_upward
11
arrow_downward

Проблема в том, что для подключенных компонентов вы экспортируете оболочку 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
person Igor Skoldin    schedule 01.12.2018
comment
dive() не работает для React.Fragment: TypeError: ShallowWrapper::dive() can only be called on components - person Dmitry Druganov; 07.05.2019
comment
Используйте shallow(), когда есть несколько детей. - person tahesse; 14.04.2020