React 测试库 - onClick/onChange 错误中的上下文

Question

我正在寻求帮助，我正在尝试测试此测试中的组件我正在测试组件中的 onChange 处理程序？如果这是有道理的，我提交的表单本质上会触发 on 更改，稍后它也会触发 onSubmit。问题是这个函数从我的上下文中调用了一个调度函数。我这里没有，我想我需要以某种方式模拟这个？但对于我来说，我无法解决这个问题。我想我已经习惯了深入挖掘道具，然后你就可以很容易地模拟道具。

如有任何建议，我将不胜感激我已经在组件、测试和控制台错误下包含了所有内容。请不要担心我的表格遗漏了某些text/copy，我是故意删除的。

组件：

const HelpCards = () => {
  const { passwordModalState, passwordModalDispatch } = useContext(PasswordModalContext);
  const { formDisplayDispatch, formDisplayState } = useContext(FormDisplayContext);

  const { isOpen } = passwordModalState;
  const { form } = formDisplayState;

  const onFormChangeModalHandler = (formType) => {
    passwordModalDispatch({ type: 'CLOSE' });
    formDisplayDispatch({ type: formType });
  };

  const onLoginFormChange = () => {
    onFormChangeModalHandler('LOGIN');
  };

  const onRegistrationFormChange = () => {
    onFormChangeModalHandler('REGISTRATION');
  };

  return (
    <HelpContainer data-testid="helpContainer" modalDisplayed={isOpen}>
      {form === 'login' && (
        <Help data-testid="FirstTimeHereCard">
          <LaptopIcon alt="decorative laptop icon" />
          <HelpHeading>First time here?</HelpHeading>
          <HelpInfo></HelpInfo>
          <MarginVertical aria-hidden="true" remSize="3" />
          <HelpButton
            tabIndex="0"
            type="button"
            aria-label="register for online smart super access"
            onClick={onRegistrationFormChange}
            role="button"
          >
            Register for online access
          </HelpButton>
          <MarginVertical aria-hidden="true" remSize="3" />
        </Help>
      )}
      <Help data-testid="NeedSomeHelpCard">
        <PhoneIcon alt="decorative phone icon" />
        <HelpHeading>Need some Help ?</HelpHeading>
        <HelpInfo>
        </HelpInfo>
        <br />
        <HelpInfo>Having issues registering?</HelpInfo>
        <HelpInfo>
        </HelpInfo>
        <MarginVertical aria-hidden="true" remSize="3" />
        <HelpButton href={`tel:${}`} aria-label="">
          {}
        </HelpButton>
        <MarginVertical aria-hidden="true" remSize="3" />
      </Help>
      {form != 'login' && (
        <Help data-testid="AlreadyRegisteredCard">
          <CardIcon alt="decorative information card icon" />
          <HelpHeading>Already registered ?</HelpHeading>
          <MarginVertical aria-hidden="true" remSize="3" />
          <HelpButton
            role="button"
            type="button"
            data-testid="loginBtn"
            aria-label=""
            onClick={onLoginFormChange}
          >
            Log in
          </HelpButton>
          <MarginVertical aria-hidden="true" remSize="3" />
        </Help>
      )}
      <Help data-testid="">
        <CardIcon />
        <HelpHeading></HelpHeading>
        <MarginVertical aria-hidden="true" remSize="3" />
        <HelpButton data-testid="" href={} aria-label="
        </HelpButton>
        <MarginVertical aria-hidden="true" remSize="3" />
      </Help>
    </HelpContainer>
  );
};

export default HelpCards;

测试

test('', () => {
  const passwordModalContext = {
    passwordModalState: {
      isOpen: false
    }
  };

  const formContext = {
    formDisplayState: {
      form: 'login'
    }
  };

  const { container } = render(
    <FormDisplayContext.Provider value={formContext}>
      <PasswordModalContext.Provider value={passwordModalContext}>
        <HelpCards />
      </PasswordModalContext.Provider>
    </FormDisplayContext.Provider>
  );


  const button = screen.getByText(/register for online access/i);

  userEvent.click(button);

});

错误：（我知道在我的测试范围内这是失败的，因为它不存在。我只是不确定解决方案，模拟？我应该导入它吗？以及如何去做？）

    TypeError: passwordModalDispatch is not a function

      88 |
      89 |   const onFormChangeModalHandler = (formType) => {
    > 90 |     passwordModalDispatch({ type: 'CLOSE' });
         |     ^
      91 |     formDisplayDispatch({ type: formType });
      92 |   };
      93 |

Answer 1

为 FormDisplayContext.Provider 使用提供的错误值应该是这样的：

  const formContext = {
    passwordModalDispatch: jest.fn(), // <- missing this function
    formDisplayState: {
      form: 'login'
    }
  };

  const { container } = render(
    <FormDisplayContext.Provider value={formContext}>
      <PasswordModalContext.Provider value={passwordModalContext}>
        <HelpCards />
      </PasswordModalContext.Provider>
    </FormDisplayContext.Provider>
  );

取决于你想测试多少，如果你只想单独测试HelpCards（单元测试），就给它一个模拟版本的passwordModalDispatch。

但是如果你想测试它与其他组件的交互（或集成测试）然后给出它的真实实现 passwordModalDispatch

查看 this amazing article 来决定您应该如何测试。

React 测试库 - onClick/onChange 错误中的上下文

React Testing Library - Context within onClick/onChange error

javascript

reactjs

jestjs

react-testing-library