Vue测试预期的空值

Question

我正在努力创建测试。我的观点最终将使用身份验证代码验证电子邮件地址。我现在只有视图，没有任何东西连接到电子邮件或生成代码。我不断得到一个空属性的期望值。这是我得到的错误：

 verifyUser logs results if correct code (123456) is provided

    expect(jest.fn()).toHaveBeenCalledWith(...expected)

    Expected: "USER:", undefined, {"input": {"username": "123456"}, "verificationCode": null}
    Received
           1: "USER:", undefined
           2: "verificationCode: ", {"input": {"username": "123456"}}

测试文件：

import { ref } from "vue";

const verificationCode = null;
const mockVerify = {
  verificationCode,
  input: {
    username: "123456",
  },
};

jest.mock("@vue/apollo-composable", () => ({
  __esModule: true,
  useApolloClient: () => ({
    resolveClient: () => ({
      query: () => ({
        data: { signup: mockVerify },
        loading: false,
        error: null,
      }),
    }),
  }),
}));

test("verifyUser returns undefined if email doesn't meet minimum length", async () => {
  const verificationCode = ref("");
  const { verifyUser } = useVerify(verificationCode);

  const result = await verifyUser();

  expect(result).toBe(undefined);
});

test("verifyUser logs results if correct code (123456) is provided", async () => {
  const consoleSpy = jest.spyOn(console, "log");
  const verificationCode = ref("123456");
  const { verifyUser } = useVerify(verificationCode);

  await verifyUser();

  expect(consoleSpy).toHaveBeenCalledWith("USER:", undefined, mockVerify);
});

vue 文件：

  View to validate new user email address from emailed code before completing the registration process.
-->
<template lang="pug">
.Verify
  .Verify__focus
    .Verify__title Verify Your Email
    .Verify__form
      .Verify__field
        va-input.Verify__textInput(
          type="text",
          name="verificationCode",
          placeholder="Verification Code",
          v-model="verificationCode",
          @keyup.enter="verifyUser()"
        )
          template(v-slot:prependInner="")
            va-icon(name="check_circle")

        .Login__buttonRow
          va-button.Login__submitButton(@click="verifyUser") Verify
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import useVerify from "@/views/Signup/Verify/useVerify";

/**
 * Assemble the Verify reactivity.
 *
 * @returns Data for the component to use.
 *  - verificationCode: verification code the user is sent
 *  - verifyUser: function to call to carry out the verification operation.
 */
function setup() {
  const verificationCode = ref("");
  const { verifyUser } = useVerify(verificationCode);

  return {
    verificationCode,
    verifyUser,
  };
}

export default defineComponent({
  name: "Verify",
  setup,
});
</script>

<style lang="scss">
.Verify {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  &__focus {
    width: 360px;
    max-width: 95vw;
  }

  &__field {
    padding-bottom: 0.5em;
  }

  &__buttonRow {
    display: flex;
    justify-content: flex-end;
  }

  &__title {
    font-size: 1.2em;
    padding-bottom: 0.5em;
    text-align: center;
  }
}
</style>

最后是我要测试的文件：

import { useApolloClient } from "@vue/apollo-composable";
import { ValidatedUser } from "@/models";
import { gql } from "graphql-tag";

const query = gql`
  query Verify($input: Verify) {
    Verify(input: $input) {
      __typename
      token
      user {
        email
        id
      }
    }
  }
`;

/**
 * Retrive apollo client and provide useVerify
 * function to validate input and execute Verify process.
 *
 * @param verificationCode - reactively wrapped email address of the user signing up.
 * @returns useVerify composition functionality.
 */
export default function useVerify(verificationCode: Ref<string>): {
  verifyUser: () => Promise<void>;
} {
  const { resolveClient } = useApolloClient();
  /**
   * Execute the Verify process for the given verification code.
   */
  async function verifyUser(): Promise<void> {
    if (verificationCode.value !== "123456") {
      //TODO: add window that shows the verification code is not valid
      return;
    } else {
      //TODO: link to login page
    }
    const client = resolveClient();

    const variables = {
      input: { username: verificationCode.value },
    };
    const response = await client.query({ query, variables });
    const validatedUser: ValidatedUser = response.data.Verify;
    console.log("USER:", validatedUser);
    console.log("verificationCode: ", variables);
  }
  return { verifyUser };
}

我需要做什么才能让verificationCode 为空？还是让这个测试通过？

Answer 1

有几个问题需要解决：

1. useVerify() 似乎没有在 API 响应中包含 verificationCode 属性，因此应该从 mockVerify 中删除：

   //const verificationCode = null
   const mockVerify = {
     // verificationCode, ❌ this is not actually inserted in useVerify()
     input: {
       username: '123456',
     },
   }
   

2. useVerify() 从 Verify 字段读取 API 响应，但您的 API 响应模拟设置了 signup 字段：

   jest.mock('@vue/apollo-composable', () => ({
     __esModule: true,
     useApolloClient: () => ({
       resolveClient: () => ({
         query: () => ({
           // data: { signup: mockVerify }, ❌ useQuery() reads `data.Verify` (not `data.signup`)
           data: { Verify: mockVerify }, // ✅
           loading: false,
           error: null,
         }),
       }),
     }),
   }))
   

3. 您的第二个测试断言 console.log() 是用 USER:、undefined 和 mockVerify 调用的，但 useVerify() 中的实际调用只有两个参数：

   test('verifyUser logs results if correct code (123456) is provided', async () => {
     ⋮
     // expect(consoleSpy).toHaveBeenCalledWith('USER:', undefined, mockVerify) ❌ useVerify() calls console.log() with only 2 args
     expect(consoleSpy).toHaveBeenCalledWith('USER:', mockVerify) // ✅
   })
   

demo

注意：使用console.log() 来验证行为可能会导致脆弱的测试。如果日志记录是预期功能（不寻常但并非不可能），我建议仅测试 console.log()。