how to jest test an async action with axios in react ? - part 2

Question

This is a continuation of my previous question.

I tried testing for REGISTER_FAIL case. This is what i did:

test("should not register a  user", async () => {
  axios.mockRejectedValue({
    status: 500,
  });
  const userInfo = {
    name: "",
    email: "",
    password: "",
  };
  await store.dispatch(register(userInfo)).then(() => {
    expect(store.getActions()[0]).toEqual({
      type: REGISTER_FAIL,
      payload: {
        token: null,
        isAuthenticated: false,
        loading: true,
        // user: null,
      },
    });
  });
});

I am getting this error:

tmhao2005 · Accepted Answer · 2021-01-23 08:59:57Z

1

I'm guessing the issue from using the shared store which ended up the issue. I would suggest to separate store for each test. The idea looks like below:

/** mock-store */
const createMockStore = configureMockStore([thunk]);

// Create a store maker to create store for each test
const storeMaker = () => {
  const defaultState = [];
  const store = createMockStore(defaultState);

  return store;
}

/** reset mock */
afterEach(() => jest.resetAllMocks());

test("should register a user ", async () => {
  // Run to create at each test
  const store = storeMaker();

  axios.mockImplementation(() => {
    return Promise.resolve({
      status: 200,
      data: {
        token: "testToken",
      },
    });
  });
  
  // const res = await axios.post("/api/users");
  // console.log(res.body);

  const testUser = {
    name: "testName",
    email: "[email protected]",
    password: "testPassword",
  };
  await store.dispatch(register(testUser)).then(() => {
    expect(store.getActions()[0]).toEqual({
      type: REGISTER_SUCCESS,
      payload: {
        token: "testToken",
        isAuthenticated: true,
        loading: false,
      },
    });
  });
});

test("should not register a  user", async () => {
  // Likewise above
  const store = storeMaker();

  axios.mockRejectedValue({
    status: 500,
  });
  const userInfo = {
    name: "",
    email: "",
    password: "",
  };
  await store.dispatch(register(userInfo)).then(() => {
    expect(store.getActions()[0]).toEqual({
      type: REGISTER_FAIL,
      payload: {
        token: null,
        isAuthenticated: false,
        loading: true,
        // user: null,
      },
    });
  });
});

answered Jan 23, 2021 at 8:59

tmhao2005

17.7k4 gold badges46 silver badges52 bronze badges

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

2 Comments

kob003 Over a year ago

just figured it out. OR i could have just changed the index number of store.getActions() i.e expect(store.getActions()[1]).toEqual({ type: REGISTER_FAIL, payload: { token: null, isAuthenticated: false, loading: true, }, });

tmhao2005 Over a year ago

Yep you could but it’s best to separate test each other. Let’s imagine you remove one test or change the order would create the issue again

ecoplaneteer · Accepted Answer · 2021-01-23 08:55:07Z

1

If you are using Async/Await, then no need to use then()

I guess if the register failed, it would throw an error. So put the test code in error catching part.

test("should not register a  user", async () => {
  axios.mockRejectedValue({
    status: 500,
  });
  const userInfo = {
    name: "",
    email: "",
    password: "",
  };
  try {
    const res = await store.dispatch(register(userInfo))
  } catch (error) {
    expect(store.getActions()[0]).toEqual({
      type: REGISTER_FAIL,
      payload: {
        token: null,
        isAuthenticated: false,
        loading: true,
        // user: null,
      },
    });
  }
});

answered Jan 23, 2021 at 8:55

ecoplaneteer

1,9841 gold badge12 silver badges29 bronze badges

Collectives™ on Stack Overflow

how to jest test an async action with axios in react ? - part 2

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related