Question

我有像这样的演示文稿组件

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

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

我需要使用酶lib测试Login组件。所以，如果我尝试启动此测试

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

存在不变违规：无法找到＆＃34;存储＆＃34;在＆＃34; Connect（Form（WithStyles（Login）））＆＃34;的上下文或道具中。

如果我启动此测试：

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。

P.S。登录组件是一个演示文稿 - 像这样的组件

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

如何使用带快照的酶测试reduxForm组件？

1 个答案: