ReactWrapper :: state () может быть вызван только для компонентов класса Unit Testing Jest и Enzyme - PullRequest
Новая
       23

ReactWrapper :: state () может быть вызван только для компонентов класса Unit Testing Jest и Enzyme

0 голосов
/ 17 октября 2019

Написание юнит-теста в реакции с использованием шутки и энзима. При проверке состояния компонента он выдает ошибку «ReactWrapper :: state () может быть вызван только для компонентов класса». 

import React from 'react';
import { mount } from 'enzyme';
import expect from 'expect';
import CustomerAdd from '../CustomerAdd'
import MUITheme from '../../../../Utilities/MUITheme';
import { ThemeProvider } from '@material-ui/styles';

describe('<CustomerAdd />', () => {
    const wrapper = mount(
        <ThemeProvider theme={MUITheme}>
          <CustomerAdd {...mockProps}></CustomerAdd>
        </ThemeProvider>
        );
        test('something', () => {
            expect(wrapper.find(CustomerAdd).state('addNewOnSubmit')).toEqual(true);
        });
});

В приведенном выше коде CustomerAdd Component является компонентом класса. Я не понимаю, что не так с моим кодом. Может ли кто-нибудь помочь мне выйти из этой проблемы. Заранее спасибо.

1 Ответ

0 голосов
/ 17 октября 2019

Так что ваш экспорт по умолчанию 

export default withStyles(styles)(CustomerAdd);

экспортирует функциональную (HOC) оболочку для вашего компонента на основе классов. И не имеет значения, если имя класса и импорта в 

import CustomerAdd from '../CustomerAdd'

совпадают. Ваш тест импортирует упакованную версию и после вызова .find(CustomerAdd) возвращает, что HOC не ваш класс. И вы не можете работать с экземпляром.

Краткосрочное решение: экспортируйте класс напрямую как именованный экспорт. 

export class CustomerAdd {
  ...
}

export default withStyles(styles)(CustomerAdd);

Используйте именованный импорт в своих тестах: 

import { CustomerAdd } from '../CusomerAdd';

Быстрое и грязное решение: используйте .dive, чтобы отреагировать на компонент класса: 

expect(wrapper.find(CustomerAdd).dive().state('addNewOnSubmit')).toEqual(true);

Это скорее антипаттерн, так как если вы добавляете дополнительный HOC в экспорт по умолчаниювам нужно будет пропатчить все связанные тесты, добавив соответствующее количество вызовов .dive().dive()....dive().

Долгосрочное решение: избегайте состояния тестирования, это детали реализации.

Вместо этого сосредоточьтесь на проверке того, чтобыли оказаны. Тогда вы в безопасности в случае множества различных техник рефакторинга, таких как замена класса функциональным компонентом, переименование элементов состояния / экземпляра, поднятие состояния вверх, подключение компонента к Redux и т. Д.

...