Блог

документы redux

это оболочка, к которой они предоставляют доступ компонентам (в рамках тестов)… магазин/поведение 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 amp;amp; alertState.message   " header"}
      // in tests, returns as "undefined header"
    </SelectMediaWrapper>
  )
}
 

Я не уверен, с чего начать, testing-utils решение основано очень близко к документам, и мое поведение очень похоже на то, что они использовали в ресурсе redux. Однако, похоже, я не могу заставить его работать, и я не уверен, чего мне не хватает в моей реализации. Есть какие-нибудь мысли?