您如何调试浅层提纯酶测试？

Question

我正在尝试在我的react-redux应用程序中修复失败的测试。当我再次潜水并再次进入组件时，我期望在其中看到JSX。但是，我什么也没看到。

这是我的组件-

      const Dashboard = (props) => {
          if (props.isSignedIn)
            return (
              <div className="dashboard">
                  <h1>Welcome</h1>
              </div>
            );
          return null;
        };

    const mapStateToProps = (state) => {
      return { isSignedIn: state.auth.isSignedIn };
    };
export default connect(mapStateToProps, { signIn, signOut })(Dashboard);

这是我的考试不及格：-

const setup = (initialState = {}) => {
  const store = storeFactory(initialState);
  const wrapper = shallow(<Dashboard store={store} />).dive().dive();
  return wrapper;
};

describe("on render", () => {
describe("the user is signed in", () => {
  let wrapper;
  beforeEach(() => {
    const initialState = { isSignedIn: true };
    wrapper = setup(initialState);
  });
  it("renders the dashboard", () => {
    const component = wrapper.find("dashboard");
    expect(component.length).toBe(1);
  });
});

我的商店工厂：-

export const storeFactory = (initialState) => {
  const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore);
  console.log(initialState);
  return createStoreWithMiddleware(rootReducer, initialState);
};

我的测试错误：-

● the user is signed in › renders the dashboard

    expect(received).toBe(expected) // Object.is equality

    Expected: 1
    Received: 0

当我潜水一次时，它看起来像这样：-

 <Dashboard store={{...}} isSignedIn={{...}} signIn={[Function]} signOut={[Function]} />}

但是当我尝试在仪表板组件中看到JSX时，什么也没看到？

Answer 1

[我很确定您的设置无效，因为您正在尝试shallow安装Redux连接的组件-这是一个高阶组件（HOC），它包装了另一个不能正常使用的组件[C0由于酶的浅层限制。

相反，您有两个选择：

选项1.）推荐：导出dive组件并使用Dashboard或shallow对其进行断言。

首先导出未连接的组件：

mount

然后在您的测试中，导入仪表板组件（not为默认的已连接导出）：

export const Dashboard = (props) => {
  if (props.isSignedIn)
    return (
      <div className="dashboard">
        <h1>Welcome</h1>
      </div>
    );

  return null;
}

export default connect(...)(Dashboard)

或

选项2。] 不推荐：用真实的

import { Dashboard } from "./Dashboard";

const initialProps = {
  isSignedIn: false
}

const wrapper = shallow(<Dashboard { ...initialProps } />);

// now manipulate the wrapper using wrapper.setProps(...);

和Provider HOC将组件包装在真实的store中：

mount

[有关更多测试信息，请查看此

import { Provider } from "redux";
import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import rootReducer from "../path/to/reducers";
import types from "../path/to/types";

const store = createStore(rootReducer, initialState, applyMiddleware(thunk));

const initialProps = {
  isSignedIn: false
};

const wrapper = mount(
  <Provider store={store}>
    <Dashboard { ...initialProps } />
  </Provider>
);

// now you'll dispatch real actions by type and expect the redux store to change the Dashboard component

，它涵盖了类似的示例（跳到项目符号点；忽略MemoryRouter件；并且，虽然该示例有点旧，但是测试模式是相同的）。

之所以我建议使用选项1而不是选项2是因为它更容易管理，因为您可以直接操作要测试的组件（而不是包装组件的HOC）。仅当您绝对需要测试redux到连接的组件的整个工作流程时，选项2才有用。我发现选项2绝大部分都是矫kill过正，因为您可以分别对每个零件（动作，减速器和未连接的组件）进行单元测试，并获得相同的测试范围。另外，正如我在此answer中提到的，我发现example对于单元测试redux动作最有用。