如何使用 Redux-RTK 设置 React-Testing-Library（在打字稿中）

Question

我正在使用 Redux 来管理组件的状态。虽然它适用于我的应用程序，但我无法让它在我的反应测试库测试套件中工作。

好消息是，这里Redux-RTK有设置他们的库的文档（示例如下）。坏消息是，我很难将其转换为，也很难做任何其他需要做的事情来使其在测试中实际工作。react-testing-library jsxtsx

还原文档

这是他们提供的包装器，用于让组件（在测试中）访问... redux 存储/行为？

// testing-utils.ts

import React from 'react'
import { render as rtlRender } from '@testing-library/react'
import { configureStore } from '@reduxjs/toolkit'
import { Provider } from 'react-redux'
// Import your own reducer
import alertReducer from '../alertSlice'

function render(
 ui,
  {
    preloadedState,
    store = configureStore({
      reducer: { alert: alertReducer },
      preloadedState,
    }),
    ...renderOptions
  } = {}
) {
  function Wrapper({ children }) {
    return <Provider store={store}>{children}</Provider>
  }
  return rtlRender(ui, { wrapper: Wrapper, ...renderOptions })
}

// re-export everything
export * from '@testing-library/react'
// override render method
export { render }

• 当我在 中编写测试时react-testing-library，即用户单击按钮时，我正在测试的值（如下所示）显示为“未定义”。

import { render, screen } from "../../../testing-utils/test-utils";

  test.only("when the user clicks the 'click me' button, a snackbar appears", async () => {
    expect(screen.queryByText(/header/i)).toBeInTheDocument();

    const clickMeButton = screen.getByRole("button", { name: /click me/i });
    user.click(clickMeButton);

    expect(
    // screen.debug() shows: 'undefined header' not ... 'great job header'
      await screen.findByText(/great job header/i)
    ).toBeInTheDocument();
  });

• 我正在测试的组件：

const SelectMedia = () => {
  const alertState = useAppSelector(selectAlert);
  const dispatch = useAppDispatch();

  const createSnackBar = () => {
    dispatch(
      setAlert({
        type: "success",
        message: "great job",
        display: "support-both",
      })
    );
  };


  return (
    <SelectMediaWrapper>
      {alertState && alertState.message + " header"}
      // in tests, returns as "undefined header"
    </SelectMediaWrapper>
  )
}

我不知道从这里开始哪里，该testing-utils解决方案非常接近文档，并且我的行为与他们在 redux 资源中使用的非常相似。但是，我似乎无法让它工作，并且我不确定我的实现中缺少什么。有什么想法吗？