Мелкая копия компонента React с предоставленным хранилищем в Enzyme - PullRequest
Новая
       60

Мелкая копия компонента React с предоставленным хранилищем в Enzyme

0 голосов
/ 22 января 2020

Когда я пытаюсь shallow(<LoginForm />), я получаю следующую ошибку Invariant Violation: Could not find react-redux context value; please ensure the component is wrapped in a <Provider>. Поэтому, чтобы исправить это, я попытался: 

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

Это работает, однако вывод отладки: 

<ContextProvider value={{...}}>
  <LoginForm />
</ContextProvider>

Но я также хочу отрендерить LoginForm. Некоторые другие вещи, которые я пытался исправить:

wrapper.find(LoginForm).shallow();

shallow(
    <Provider store={store}>
        <LoginForm />
    </Provider>
).dive();

wrapper.find(LoginForm).shallow();

shallow(<LoginForm />, {
    wrappingComponent: Provider,
    wrappingComponentProps: { store }
});

Но все это приводит к одной и той же упомянутой ошибке над. Как я могу это исправить, используя метод shallow? Кроме того, LoginForm использует ловушки реагирования, в том числе ловушку useSelect, поэтому передача хранилища моей подпорке не является решением, которое я ищу.

1 Ответ

0 голосов
/ 17 апреля 2020

Вы можете использовать насмешкуSelector, а также удобную функцию выбора насмешек 

import React from 'react';
import { mount, shallow } from 'enzyme';
import { getIsAuthorized } from 'modules/auth/reducer';
import SignIn from '../SignIn';

jest.mock('modules/auth/reducer');

jest.mock('react-redux', () => {
  const RealModule = jest.requireActual('react-redux');
  return {
    ...RealModule,
    useSelector: (fn) => fn(),
  };
});

interface SetupProp {
  isAuthorized: boolean;
}

describe('Page: SignIn', () => {
  const setupWrapper = ({ isAuthorized }: SetupProp) => {
    (getIsAuthorized as jest.Mock).mockReturnValue(isAuthorized);
    return shallow(<SignIn />);
  };

  test('should render form', () => {
    const wrapper = setupWrapper({ isAuthorized: false });
    expect(wrapper).toMatchSnapshot();
  });
});

Компонент входа: 

  const SignIn: FunctionComponent = () => {
   //...
       const isAuthorized = useSelector(getIsAuthorized);
   //...
  }
...