使用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

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

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