时间戳

首页 > 解决方案 > React 测试库 - o​​nClick/onChange 错误中的上下文

javascript - React 测试库 - o​​nClick/onChange 错误中的上下文

问题描述

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

任何建议都会受到重视，我已将组件、测试和控制台错误下方的所有内容都包括在内。请不要担心我的表格缺少某些文本/副本，我故意将其删除。

零件：

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 |

标签： javascriptreactjsjestjsreact-testing-library

解决方案

使用提供的错误值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

查看这篇精彩的文章来决定你应该如何测试。

推荐阅读