使用 redux-toolkit 测试反应组件

Question

我有一个这样的组件：

export const DetailsItem: FC = (): ReactElement => {
  const { isInEditMode } = useAppSelector(({ editMode }) => editMode);
  if (isInEditMode) {
    return <DetailsItemEdit />;
  }
  return <DetailsItemDisplay />;
};

并且正在尝试对其进行测试。

describe('DetailsItem', () => {
  it('should render DetailsItemDisplay component', () => {
    render(
      <Provider store={}> // I want to pass isInEditMode here.
        <DetailsItem />
      </Provider>,
    );

    screen.debug();
  });
});

问题是，我需要以某种方式模拟商店，以匹配我的情况。有什么想法我应该如何处理？

我记得在我之前的项目中我使用了一个 npm 包来做这个，但是现在找不到它，并且不记得我是怎么做的，或者它叫什么

Answer 1

您可以为您的测试创建一个辅助函数来抽象存储/依赖项的设置：

// import dependencies here:

function createTestWithStore(stateFromTest, component) {
  let reducer = { reducerA, reducerB };
  let preloadedState = merge(initialState, stateFromTest);
  let store = configureStore({
    reducer,
    preloadedState
  })
  return <Provider store={store}>{component}</Provider>
}

并在您的测试中使用它：

describe('DetailsItem', () => {
  it('should render DetailsItemDisplay component with a single item', () => {
    let testState = { list: [{ id: 1, name: "John" }] };
    render(createTestWithStore(testState, <DetailsItem />));
    screen.debug();
  });

  it('should render DetailsItemDisplay component no item', () => {
    let testState = { list: [] };
    render(createTestWithStore(testState, <DetailsItem />));
    screen.debug();
  });
});

查看 Redux 的“编写测试”页面，它是“使用 Redux 测试应用程序的推荐实践”的一部分： https://redux.js.org/usage/writing-tests#connected-components