Как протестировать компонент reduxForm с помощью фермента со снимками?

Question

У меня есть такой компонент представления

 const Login = ({userName}) => {...}

    export default reduxForm({form: "login"})(withStyles(loginStyles)(Login));

Мне нужно протестировать компонент входа в систему с помощью фермента lib.Итак, если я попытаюсь запустить этот тест

it("renders correctly_NEW", () => {
        expect(shallow(<Login {...state(false)}/>).dive()).toMatchSnapshot();
      });

Существует инвариантное нарушение: не удалось найти «store» ни в контексте, ни в подпунктах «Connect (Form (WithStyles (Login))))».

Если я запускаю этот тест:

expect(shallow(<Provider store={configureStore()}><Login {...state(false)}/></Provider>).dive()).toMatchSnapshot();

результат будет:

exports[`LoginForm renders correctly_NEW 1`] = `
<Connect(Form(WithStyles(Login)))
  appName="appName"
  authError={false}

Но мне нужен снимок компонента Login, а не Connect.

ps Компонент входа - это презентация - такой компонент

<Form id="form" onSubmit={onSubmit}>
    <Card className={classes.card}>
      <CardHeader
      ...

Answer 1

Вы можете использовать redux-mock-store и поместить его в контекст мелкого визуализированного компонента

import configureStore from 'redux-mock-store' //ES6 modules
const { configureStore } = require('redux-mock-store') //CommonJS
const middlewares = []
const mockStore = configureStore(middlewares)

it("renders correctly_NEW", () => {

  expect(shallow(
    <Login{...state(false)}/>, 
    {
      context: {store: mockStore}
    }
  ).dive()).toMatchSnapshot();
 });