开玩笑 - 如何在测试文件中获取 useSelect 数据

Question

我在 React 项目中有一个组件，它使用 2 个 useSelectors 来获取渲染页面的数据。 在测试时，我能够覆盖 UI 部分，但条件 UI 部分没有出现，因为 useSelector 数据不能通过模拟复制。 有人能帮我吗。

const MyComponent = () => {
  const { id } = useSelector(selecetdId);
  const dataArray = useSelector(data);

  return (
    <div>
      {!id ? (
        <Fragment>
          <AnotherCustomComponent />
          {dataArray.length > 0 ? **<CustomTable dataArray={filteredSuppliers} />** : <NoData />}
        </Fragment>
      ) : (
        **<div className="supplier-details">
          <CustomHeader />
        </div>**
      )}
    </div>
  );
};

由于我没有从 useSelector id、dataArray 中获取 output，在测试中我无法涵盖代码的加星标部分

Answer 1

我感觉你正在使用 ReactTestingLibrary 和 redux 和 dedux-toolkit；）

你需要做两件事：

1. 有一个模拟的 state，其值可能会导致您想要测试的条件
2. 在 redux 提供程序中渲染组件

快速样品

const renderComponent(props, reduxState) {
  const reduxStore = configureStore({ reducer: {} /**/, preLoadedSate: reduxState });
  return render(<Provider store={reduxStore}><MyComponentToBeTested ...props /></Provider>))
}

it("Should show something if id in the state is undefined", () => {
  const stateSoThatUseSelectorWillReturnIdUndefined = {  john: true };
  const renderedResult = renderComponent({}, stateSoThatUseSelectorWillReturnIdUndefined);

/// expect something is rendered or not
});

更多详细信息： redux state 单元测试