Question

我开始研究集成测试，并且在模拟方面苦苦挣扎。我有一个注册表单，onSubmit调用firebase.auth.createUserWithEmailAndPassword，之后它使用返回的用户uid初始化文档，并使用默认值对其进行初始化。

我设法检查是否正确调用了createCserWithEmailAndPassword，但是当我尝试检查是否已调用集合集时，收到错误消息：

    expect(received).toHaveBeenCalled()

    Matcher error: received value must be a mock or spy function

    Received has value: undefined

我在这里苦苦挣扎。

这是我的测试实现：

import React from "react";
import "@testing-library/jest-dom";
import { ThemeProvider } from "styled-components";
import { defaultTheme } from "../../styles";
import { createMemoryHistory } from "history";
import { Router, Switch, Route } from "react-router-dom";
import { render, fireEvent, wait } from "@testing-library/react";
import { SignUp } from "../../sections";
import { User } from "../../types";
import { auth, firestore } from "../../lib/api/firebase";
jest.mock("../../lib/api/firebase", () => {
  return {
    auth: {
      createUserWithEmailAndPassword: jest.fn(() => {
        return {
          user: {
            uid: "fakeuid",
          },
        };
      }),
      signOut: jest.fn(),
    },
    firestore: {
      collection: jest.fn(() => ({
        doc: jest.fn(() => ({
          collection: jest.fn(() => ({
            add: jest.fn(),
          })),
          set: jest.fn(),
        })),
      })),
    },
  };
});

const defaultUser: User = {
  isActive: false,
  accountName: "No balance",
  startingBalance: 0.0,
  monthlyBudget: 0.0,
};

const history = createMemoryHistory({ initialEntries: ["/signup"] });
const renderWithRouter = () =>
  render(
    <ThemeProvider theme={defaultTheme}>
      <Router history={history}>
        <Switch>
          <Route exact path="/signup">
            <SignUp />
          </Route>
          <Route exact path="/">
            <div data-testid="GenericComponent"></div>
          </Route>
        </Switch>
      </Router>
    </ThemeProvider>
  );

describe("<SignUp/>", () => {
  it("correctly renders the signup form", () => {
    const { getByTestId } = renderWithRouter();
    const form = getByTestId("SignupForm");
    expect(form).toBeInTheDocument();
  });
  it("correctly renders the signup form", () => {
    const { getByTestId } = renderWithRouter();
    const form = getByTestId("SignupForm");
    expect(form).toBeInTheDocument();
  });

  it("let user signup with valid credentials", async () => {
    const { getByPlaceholderText, getByTestId } = renderWithRouter();
    const emailField = getByPlaceholderText("yourname@company.com");
    const passwordField = getByPlaceholderText("Password");
    const confirmPasswordField = getByPlaceholderText("Confirm Password");
    const submitButton = getByTestId("Button");

    fireEvent.change(emailField, {
      target: { value: "test@test.com" },
    });

    fireEvent.change(passwordField, { target: { value: "Lampone01!" } });
    fireEvent.change(confirmPasswordField, {
      target: { value: "Lampone01!" },
    });
    fireEvent.click(submitButton);

    expect(submitButton).not.toBeDisabled();

    await wait(() => {
      expect(auth.createUserWithEmailAndPassword).toHaveBeenCalled();
      expect(
        firestore.collection("users").doc("fakeUid").set(defaultUser)
      ).toHaveBeenCalled();
      expect(history.location.pathname).toBe("/dashboard");
    });
  });
});

我在做什么错？谢谢大家。

React测试库，firebase，模拟函数

0 个答案: