react js jest 单元测试

Question

在Login 函数组件中，我有一个函数validateForm，它检查username 和password 的长度是否大于零。

function validateForm() {
  return username.length > 0 && password.length > 0;
}

我使用 Jest 作为单元测试工具。

import React from "react";
import Login, { validateForm } from "./Login";
import { render, screen } from "@testing-library/react";

describe("LoginUser", () => {
  test("validate username and password should be greater than 0", () => {
    var username = "name";
    var password = "pass";
    expect(validateForm(username.length)).toBeGreaterThan(0);
  });
});

TypeError: (0 , _Login.validateForm) is not a function

我在运行测试用例时遇到了上述错误。如何解决这个错误？

Answer 1

您好像忘记导出了：

  ...
  export function validateForm() {
    return username.length > 0 && password.length > 0;
  }
  ...

但是如果validateForm被定义在在Login组件（函数）的主体内，考虑将它移出并单独导出以使这个测试工作。

  // Put outside and export:
  export function validateForm(username, password) {
    return username.length > 0 && password.length > 0;
  }

  const Login = (props) => {
    // And remove from here.
    // function validateForm() {
    //    return username.length > 0 && password.length > 0;
    // }

    // use this variable in the component.
    const isFormValid = validateForm(username, password);

    return ...
  }

  export default Login;