Question

我有一个使用上下文挂钩的 React 应用程序。该应用程序运行正常，但我在编写通过测试时遇到困难。

我的上下文看起来像

import React, { createContext } from 'react';

const DataContext = createContext();

export const DataProvider = (props) => {
  const [personSuccessAlert, setPersonSuccessAlert] = React.useState(false);

  return (
    <DataContext.Provider
      value={{
        personSuccessAlert,
        setPersonSuccessAlert,
      }}>
      {props.children}
    </DataContext.Provider>
  );
};

export const withContext = (Component) => (props) => (
  <DataContext.Consumer>
    {(globalState) => <Component {...globalState} {...props} />}
  </DataContext.Consumer>
);

应用在 useEffect 挂钩中使用此上下文

import React, { useEffect } from 'react';

import { Alert } from '../../../components/alert';

const PersonRecord = ({
  match: {
    params: { id },
  },
  setPersonSuccessAlert,
  personSuccessAlert,
}) => {

  const closeAlert = () => {
    setTimeout(() => {
      setPersonSuccessAlert(false);
    }, 3000);
  };

  useEffect(() => {
    closeAlert();
  }, [location]);

  return (
    <>
      <Alert
        open={personSuccessAlert}
      />
    </>
  );
};

export default withContext(PersonRecord);

这一切都按预期进行。当我运行测试时，我知道我需要导入 DataProvider 并包装组件，但我一直收到错误消息。

  test('useeffect', async () => {
    const history = createMemoryHistory();
    history.push('/people');
    const setPersonSuccessAlert = jest.fn();
    const { getByTestId, getByText } = render(
      <DataProvider value={{ setPersonSuccessAlert }}>
        <MockedProvider mocks={mocksPerson} addTypename={false}>
          <Router history={history}>
            <PersonRecord match={{ params: { id: '123' } }} />
          </Router>
        </MockedProvider>
      </DataProvider>,
    );
    const alert = getByTestId('styled-alert');
    await act(async () => new Promise((resolve) => setTimeout(resolve, 4000)));
  });

根据我的更改方式，我会遇到一些不同的错误，但最常见的是

[TypeError: setPersonSuccessAlert is not a function]

我认为我的上下文设置与其他上下文略有不同，这就是为什么我无法使用此处找到的其他方法。

模拟 React Context 进行测试

0 个答案: