Jest Mocking with Quasar and Typescript

Question

I want to mock Amplify Auth service in my test. There is no error, but test doesn't work because of my mock.

Here is the code I'm about to test:

  signIn(): void {
    if (!this.valid) return;
    this.loading = 1;
    this.$Auth
      .signIn(this.email, this.password)
      .then(() => this.$router.push({ name: "homeManagement" }))
      .catch((err: any) => (this.errorMessage = err.message))
      .finally(() => (this.loading = 0));
  }

Here is the test:

const $t = jest.fn();
$t.mockReturnValue("");

const $Auth = jest.fn();
$Auth.mockReturnValue({
  code: "UserNotFoundException",
  name: "UserNotFoundException",
  message: "User does not exist."
});


const factory = mountFactory(LoginForm, {
  mount: {
    mocks: {
      $Auth
    }
  }
});

describe("LoginForm", () => {
  it("User not found", async () => {
    const wrapper = factory();

    await wrapper.setData({
      email: "[email protected]",
      password: "Qwer321"
    });
    await wrapper.vm.signIn();
    expect(wrapper.vm.$data.errorMessage.length).not.toEqual(0);
  });
});

Dvdgld · Accepted Answer · 2020-09-24 07:17:23Z

1

Figured out a solution, but maybe there is a better one flush-promises to mock Amplify call:

const $Auth = jest.fn();
$Auth.signIn = () => Promise.resolve();

describe("LoginForm", () => {
it("User does not exist", async () => {
const wrapper = factory();

await wrapper.setData({
  email: "[email protected]",
  password: "Qwer321",
  valid: true
});

await wrapper.vm.signIn();
await flushPromises();
expect(wrapper.vm.$data.errorMessage.length).not.toEqual(0);
  });
});

answered Sep 24, 2020 at 7:17

Dvdgld

2,1842 gold badges17 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Jest Mocking with Quasar and Typescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related