Как исправить: TypeError: ReactWrapper :: state ("<state>") требует, чтобы `state` не был` null` или `undefined`

Question

Я проверяю состояние в приложении Create-React-App с помощью Enzyme.Как я могу пройти этот тест?

Когда мой компонент приложения отображается в моем тесте, он помещается в

<BrowserRouter>

(при попытке его монтировать в противном случае выдается

 Invariant failed: You should not use <Route> outside a <Router>

ошибка в тесте).

Неглубокая оборачиваемость дает

 TypeError: Cannot read property 'state' of null

, как и при монтировании и обмотке с

<BrowserRouter>.

Я пробовал это

Результат: Вопрос без ответа

это

Результат: Вопрос без ответа

это

Результат: удаление реакции-test-renderer не сделал различий

и this

Результат: Я проверил состояние в своем компоненте, и оно определено.console.log (wrapper.instance (). state) выдает ту же ошибку: 'null'

App.js:

class App extends Component {
  //#region Constructor
  constructor(props) {
    super(props);
    this.state = {
    //... other correctly formatted state variables
      specificRankingOptionBtns: false
    }

app.test.js:

import React from 'react'
import { BrowserRouter } from 'react-router-dom'
import App  from '../../App'
import renderer from 'react-test-renderer'
import { shallow, mount } from 'enzyme';

describe('App', () => {
fit('renders App.js state correctly', () => {
  const wrapper = mount(<BrowserRouter><App /></BrowserRouter>);
  //console.log(wrapper.instance().state);
  //const wrapper = shallow(<App />);
  //const wrapper = mount(<App />);
  console.log(wrapper.instance().state);
  //const wrapper = mount(shallow(<BrowserRouter><App /> 
  //</BrowserRouter>).get(0));
  expect(wrapper.state('specificRankingOptionBtns')).toEqual(false);
});
}

Ожидается: тест пройден

Фактически: "TypeError: ReactWrapper :: state (" specificRankingOptionBtns ") требует, чтобы state не было null или undefined"

Answer 1

У меня была такая же проблема. Это сработало для меня.

import {MemoryRouter as Router} из'act-router-dom ';

it('should find MaskedTextInput in LoginPage', () => {
    const mountWithRouter = node => mount(<Router>{node}</Router>);
    const wrapper = mountWithRouter(<LoginPage {...mockedProps} />);
    const maskedInput = wrapper.find('MaskedTextInput');

    const componentInstance = wrapper
        .childAt(0)
        .childAt(0) 
        .instance(); // could also be instance

    const mountedState = componentInstance.state.passwordInputType;
    expect(mountedState).toEqual('password');
});