Question

我有以下操作和测试用例-当我运行此测试时（jest）-我看到TypeError：无法读取操作创建者中未定义的属性'data'，不确定这里缺少什么吗？我正在提供期望的模拟数据。是因为这里有一个异步嵌套？但是我正在使用`.then，但仍然失败。

Action creator:

    export const getUser = ({
      uname,
      apiendpoint,
    }) => {
      const arguments = {};


      return async (dispatch) => {
        await axiosHelper({ ---> this will return axios.get
          arguments,
          path: `${apiendpoint}/${uname}`,
          dispatch,
        }).then(async ({ data, headers }) => { -- getting error at this line.
          dispatch({ type: GET_USER, payload: data });
          dispatch({ type: GET_NUMBEROFUSERS, payload: headers });
        });
      };
    };

Test:

    describe('Get User Action', () => {
      let store;
      const middlewares = [thunk];
      const mockStore = configureStore(middlewares);
      beforeEach(() => {
        store = mockStore({
          data: [],
        });
      });

      afterEach(() => {
        fetchMock.reset();
        fetchMock.restore();
      })

       const arguments = {
        uname: 'user123',
        apiendpoint: 'test',
      };
      const url = 'https://www.localhost.com/blah/blah';

      it('should get a User', () => {
        fetchMock
          .getOnce(url, {
            data: mockData, -->external mock js file with user data {}
            headers: {
              'content-type': 'application/json'
            }
          });

        const expectedActions = [
          {
            type: 'GET_USER',
            data: mockData
          },
          { type: 'GET_NUMBEROFUSERS' }
        ];


        return store.dispatch(actions.getUser(arguments)).then(() => {
          expect(store.getActions()).toEqual(expectedActions);
        });

      });

Answer 1

您在同一功能上使用await和then（例如axiosHelper）。

这是错误的用法，将导致许多错误undefined。您可以使用回调功能或 .then() 或 await而不是2或全部。

我建议观看一些有关异步/等待的教程/说明，因为了解什么是Promise是非常重要的。

您的cas中发生的事情是axiosHelper被执行了两次，因为then部分将启动，但在同一时间（因为它是异步的）{{1 }}完成，代码执行继续父流程。这带来了竞争条件，并且正如我所说，将导致await，因为您执行相同的逻辑两次或两次以上。

测试反应异步动作创建者-未定义的数据

1 个答案: