Redux Observables + Jest：EventEmitter 事件监听器未触发

Question

我正在尝试测试我的史诗。我的史诗创建了一个观察者，它在第三方库发出事件时触发 redux 操作。

我的史诗：

const getFileListEpic = (action$, state$, dependencies$) =>
  action$.pipe(
    ofType(finderActions.GET_FILE_LIST),
    switchMap(({ payload }) => {
      const { masterHandle, folder } = payload;

      return from(masterHandle.getFolderMeta(folder)).pipe(
        mergeMap(
          (data: any) =>
            new Observable(o => {
              console.log(
                "xxxxxxxxxxxxxxxxxxxx: ",
                masterHandle.metaQueue[folder]
              ); // <------- THIS PRINTS!!!
              masterHandle.metaQueue[folder].on("update", (blah: any) => {
                console.log("mmmmmmmmmmmmmmmmmmmm"); // >---------- THIS DOESN'T PRINT!
                o.next(
                  finderActions.setList({
                    files: blah.files,
                    folders: blah.folders,
                    masterHandle
                  })
                );
              });
            })
        ),
        catchError(() =>
          of(finderActions.setList({ files: [], folders: [], masterHandle }))
        )
      );
    })
  );

我的失败测试：

test("getFileListEpic finderActions.GET_FILE_LIST - listens to updates", done => {
  const files = ["fi1", "fi2"];
  const folders = ["fo1", "fo2"];
  const folderUpdates = new EventEmitter();

  const folder = "fo1";
  const masterHandle = {
    getFolderMeta: jest.fn(() => Promise.resolve({ files, folders })),
    metaQueue: {
      [folder]: folderUpdates
    }
  };
  const action$ = of(finderActions.getFileList({ masterHandle, folder }));
  const state$ = null;
  const dependencies$ = {};

  const updatedFiles = ["fi3", "fi4"];
  const updatedFolders = ["fo3", "fo4"];

  finderEpic(action$, state$, dependencies$).subscribe(actions => {
    expect(actions).toEqual(
      finderActions.setList({
        files: updatedFiles,
        folders: updatedFolders,
        masterHandle
      })
    );
    done();
  });

  folderUpdates.emit("update", {
    files: updatedFiles,
    folders: updatedFolders
  });
});

这失败了：

➜  webinterface git:(em-bulk-actions) ✗ npm run test src/redux/epics/finder-epic.test.js

> opacity@0.2.1 test /Users/edmundmai/Documents/src/opacity/webinterface
> jest "src/redux/epics/finder-epic.test.js"

  console.log src/redux/epics/finder-epic.ts:18
    xxxxxxxxxxxxxxxxxxxx:  EventEmitter {
      _events: [Object: null prototype] {},
      _eventsCount: 0,
      _maxListeners: undefined
    }

 FAIL  src/redux/epics/finder-epic.test.js (8.345s)
  ✕ getFileListEpic finderActions.GET_FILE_LIST - listens to updates (5011ms)

  ● getFileListEpic finderActions.GET_FILE_LIST - listens to updates

    Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout.Error:

      30 | // });
      31 |
    > 32 | test("getFileListEpic finderActions.GET_FILE_LIST - listens to updates", done => {
         | ^
      33 |   const files = ["fi1", "fi2"];
      34 |   const folders = ["fo1", "fo2"];
      35 |   const folderUpdates = new EventEmitter();

      at new Spec (node_modules/jest-config/node_modules/jest-jasmine2/build/jasmine/Spec.js:116:22)
      at Object.test (src/redux/epics/finder-epic.test.js:32:1)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        8.977s

如果您查看我的控制台日志，它并没有在事件处理函数中打印，所以它似乎没有触发那个 redux 操作。我做错了什么？

Answer 1

不知道为什么，但事件侦听器在嵌套观察者中时不起作用。我最终把它分成了一个不同的史诗，这很有效。

希望这对某人有所帮助。

史诗

const getFileListEpic = (action$, state$, dependencies$) =>
  action$.pipe(
    ofType(finderActions.GET_FILE_LIST),
    switchMap(({ payload }) => {
      const { masterHandle, folder } = payload;

      return from(masterHandle.getFolderMeta(folder)).pipe(
        flatMap((data: any) => [
          finderActions.setList({
            files: data.files,
            folders: data.folders,
            masterHandle
          }),
          finderActions.listenForUpdates({ masterHandle, folder })
        ]),
        catchError(() =>
          of(
            finderActions.setList({
              files: [],
              folders: [],
              masterHandle
            })
          )
        )
      );
    })
  );

const setFileListEpic = (action$, state$, dependencies$) =>
  action$.pipe(
    ofType(finderActions.LISTEN_FOR_UPDATES),
    switchMap(({ payload }) => {
      const { masterHandle, folder } = payload;

      return new Observable(o => {
        masterHandle.metaQueue[folder].on("update", (data: any) => {
          o.next(
            finderActions.setList({
              files: data.files,
              folders: data.folders,
              masterHandle
            })
          );
        });
      });
    })
  );

测试

test("getFileListEpic finderActions.GET_FILE_LIST - grabs initial list ", done => {
  const files = ["fi1", "fi2"];
  const folders = ["fo1", "fo2"];
  const folderUpdates = new EventEmitter();

  const folder = "fo1";
  const masterHandle = {
    getFolderMeta: jest.fn(() => Promise.resolve({ files, folders })),
    metaQueue: {
      [folder]: folderUpdates
    }
  };
  const action$ = of(finderActions.getFileList({ masterHandle, folder }));
  const state$ = null;
  const dependencies$ = {};

  finderEpic(action$, state$, dependencies$)
    .toArray()
    .subscribe(actions => {
      expect(actions).toEqual([
        finderActions.setList({ files, folders, masterHandle }),
        finderActions.listenForUpdates({ masterHandle, folder })
      ]);
      done();
    });
});

test("getFileListEpic finderActions.LISTEN_FOR_UPDATES", done => {
  const folderUpdates = new EventEmitter();

  const folder = "fo1";
  const masterHandle = {
    metaQueue: {
      [folder]: folderUpdates
    }
  };
  const action$ = of(finderActions.listenForUpdates({ masterHandle, folder }));

  const updatedFiles = ["fi3", "fi4"];
  const updatedFolders = ["fo3", "fo4"];

  finderEpic(action$).subscribe(actions => {
    expect(actions).toEqual(
      finderActions.setList({
        files: updatedFiles,
        folders: updatedFolders,
        masterHandle
      })
    );
    done();
  });

  folderUpdates.emit("update", {
    files: updatedFiles,
    folders: updatedFolders
  });
});