时间戳

首页 > 解决方案 > 开玩笑测试中的功能仅在单独启动时有效，但不能同时启动

reactjs - 开玩笑测试中的功能仅在单独启动时有效，但不能同时启动

问题描述

我有一个更新状态的自定义钩子。由于 useImmer()，状态是由 immer 生成的。

我已经用 Jest 和“测试库”编写了测试——它允许测试钩子——。

单独启动时，所有功能均有效。但是当我同时启动它们时，只有第一个成功。怎么会这样？

这是钩子：（为清楚起见进行了简化）：

export default function useSettingsModaleEditor(draftPage) {
  const [settings, setSettings] = useImmer(draftPage);
  
  const enablePeriodSelector = (enable: boolean) => {
    return setSettings((draftSettings) => {
      draftSettings.periodSelector = enable;
    });
  };

  const enableDynamicFilter = (enable: boolean) => {
    return setSettings((draftSettings) => {
      draftSettings.filters.dynamic = enable;
    });
  };

  const resetState = () => {
    return setSettings((draftSettings) => {
      draftSettings.filters.dynamic = draftPage.filters.dynamic;
      draftSettings.periodSelector = draftPage.periodSelector;
      draftSettings.filters.static = draftPage.filters.static;
    });
  };

  return {
    settings,
    enablePeriodSelector,
    enableDynamicFilter,
    resetState,
  };
}

和测试：

describe("enablePeriodSelector", () => {
  const { result } = useHook(() => useSettingsModaleEditor(page));
  it("switches period selector", () => {
    act(() => result.current.enablePeriodSelector(true));
    expect(result.current.settings.periodSelector).toBeTruthy();
    act(() => result.current.enablePeriodSelector(false));
    expect(result.current.settings.periodSelector).toBeFalsy();
  });
});

describe("enableDynamicFilter", () => {
  const { result } = useHook(() => useSettingsModaleEditor(page));
  it("switches dynamic filter selector", () => {
    act(() => result.current.enableDynamicFilter(true));
    expect(result.current.settings.filters.dynamic).toBeTruthy();
    act(() => result.current.enableDynamicFilter(false));
    expect(result.current.settings.filters.dynamic).toBeFalsy();
  });
});

describe("resetState", () => {
  const { result } = useHook(() => useSettingsModaleEditor(page));
  it("switches dynamic filter selector", () => {
    act(() => result.current.enableDynamicFilter(true));
    act(() => result.current.enablePeriodSelector(true));
    act(() => result.current.addShortcut(Facet.Focuses));
    act(() => result.current.resetState());
    expect(result.current.settings.periodSelector).toBeFalsy();
    expect(result.current.settings.filters.dynamic).toBeFalsy();
    expect(result.current.settings.filters.static).toEqual([]);
  });
});

所有功能在现实生活中都有效。如何解决这个问题？谢谢！

标签： reactjsunit-testingjestjsimmer.js

解决方案

答案是：useHook 在“它”之前被调用。它必须在下面调用。

推荐阅读