内部使用 redux-toolkit 测试 React 组件

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

您可以为您的测试创建一个辅助函数来抽象 store/dependencies:

// 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

内部使用 redux-toolkit 测试 React 组件

Testing react components with redux-toolkit inside

javascript

reactjs

redux

react-redux

react-testing-library