使用 jest 和 react-testing-library 測試反應上下文

Question

我正在嘗試為我的component App.js設置測試，該component App.js將context作為道具並返回一個提供者。 問題是當我嘗試測試它時，我傳遞給它的上下文總是解析為未定義。

我在組件中放置了一個控制台日志，並在創建上下文和創建組件（應該接收上下文作為參數）之間放置一個控制台日志。 由於某種原因，這首先導致了組件中的 console.log。 這可能就是為什么我得到上下文未定義的原因，因為它尚未初始化。

// Component/Provider
const App = (props) => {
  const {children, context} = props;
  const {data, dispatch} = useReducer(reducer);
  console.log(context); //undefined and this console.log runs first
  return <context.Provider value={useCallback(dispatch)}>{children}</context.Provider>
}

在我的 test.js 中

import React, {useContext} from 'react';
import {render} from 'react-testing-library';
import {App} from './App';
const context = React.createContext();

function Provider(children) {
  console.log(context); //Is correct but runs second
  return <App Context={context}>{children}</App>;
}

const customRender = (ui, options) =>
  render(ui, { wrapper: Provider, ...options });

const Consumer = () => {
  const dispatch = useContext(context);
  returns <Button onClick={dispatch({type: 'Do something'})}>Whatever</Button/>;
}
customRender(<Consumer />)

我應該能夠將Context傳遞到我的組件中以創建提供程序，但它始終未定義。

Answer 1

也許這是一個錯字，但你的文件真的叫做test.js嗎？ 如果是這樣，您需要將其更改為.jsx ，因為您在測試中使用 JSX（例如在Provider組件中）。

Answer 2

在找出如何繼續之前，我被困了一段時間。 我的問題是我沒有為上下文創建正確的形狀：我給了它一些道具，但不是在我的真實上下文中傳遞的。 因此組件無法瀏覽該新形狀。

這是我的產品形狀（非測試）

export default React.createContext({
  authenticationInfos: {
    isAuthenticated: false,
    user: {
      id: "",
      email: "",
      roles: []
    },
    customer: {
      id: "",
      prenom: "",
      nom: "",
      tel: "",
      adress: "",
      postalCode: "",
      town: "",
      sellRequests: []
    }
  },
  setAuthenticationInfos: value => {}
});

而且我只是傳遞了authenticationInfos內部的內容，而不是道具authenticationInfos本身，而且我也忘記了setAuthenticationInfos道具。

這是我的與上下文掛鈎一起使用的測試組件：

react-testing-library文檔中的函數

const customRender = (ui, { providerProps, ...renderOptions }) => {
  return render(
    <AuthContext.Provider value={providerProps}>{ui}</AuthContext.Provider>,
    renderOptions
  );
};

describe("<ConnectModal>", () => {
  test("should be able to access auth context", () => {
    const providerProps = {
      authenticationInfos: {
        isAuthenticated: false,
        user: {
          id: "",
          email: "",
          roles: [],
        },
        customer: {
          id: "",
          prenom: "",
          nom: "",
          tel: "",
          adress: "",
          postalCode: "",
          town: "",
          sellRequests: [],
        },
        shop: {
          appToken: 54,
        },
      },
      setAuthenticationInfos: (value) => {},
    };
    customRender(<MKMConnectModal />, { providerProps });
    // expect(screen.getByText(/^My Name Is:/)).toHaveTextContent(
    //   "My Name Is: C3P0"
    // );
  });
});