将 jest 测试套件生成为单独的文件而不是单个文件答案

【问题标题】：Generating jest test suites as separate files instead of single file将 jest 测试套件生成为单独的文件而不是单个文件
【发布时间】：2020-10-15 09:28:08
【问题描述】：

我需要对一堆不同的文件运行类似的测试，而我使用一个测试套件文件。

示例：

for (const configName in defaults) {
  const config = defaults[configName];
  const onMobile = testMobile.includes(configName);
  const onDesktop = testDesktop.includes(configName);
  describe(`${configName}`, () => {
    const tests = (isDesktop:boolean) => {
      let defaultConfig: AttnConfig<MultiPageCreativeConfig>;
      function freshRender() {
        cleanup();
        return render(
          <TestWrapper isDesktop={isDesktop} layout={defaultConfig.creativeConfig.base.fields.layout.layout}>
            <ConfigCtx.Provider value={defaultConfig}>
              <App />
            </ConfigCtx.Provider>
          </TestWrapper>,
          {
            container: document.documentElement
          }
        );
      }

      beforeEach(() => {
        jest.clearAllMocks();
        mockedUseWaitForPageLoad.mockReturnValue(false);
        mockedUseResponsiveLayout.mockReturnValue([isDesktop]);
        defaultConfig = attnTestConfigWrapper(config);
      });
      afterEach(cleanup);

      for (let page = 0; page < config.pages.length ;page++) {
        describe(`Page ${page + 1}`, () => {
          beforeEach(() => {
            defaultConfig.overrides.currentPageIndex = page;
            freshRender();
          });
          itPassesVisualRegressionTests(!isDesktop);
        });
      }
    }
    if (onMobile) tests(false);
    if (onDesktop) tests(true);
  })
}

然而，这种方式并没有利用多线程。由于我只会单独运行这些测试，因此与为每个配置编写单独的测试文件相比，花费的时间要长得多（大约长两到三倍）。

尽管我想在单个文件中编写测试，但如果我需要重构某些东西（我已经不得不多次更改这些文件），这会导致很多额外的工作。

有没有办法为 jest 生成测试套件以并行运行或至少将测试逻辑分解为共享实用程序函数？

【问题讨论】：

你签出并发方法了吗？你可以做it.concurrent(...)，我假设它是你在itPassesVisualRegressionTests上所拥有的
@Dus 很奇怪，我找不到关于该选项的任何文档：/ 但是可以解决我的性能问题。

标签： javascript node.js typescript testing jestjs

【解决方案1】：

我在测试中添加了并发性：

export function itPassesVisualRegressionTests(mobile = false, debug = false) {
  const itPassesVisualRegressionTestsOn = (browser: string) => {
      it.concurrent(`has no visual regressions on ${mobile ? 'mobile' : 'desktop'} ${browser}`, async () => {
      await sleep(400); // wait for animations
      const html = document.documentElement.outerHTML;
      // Pixel 3a (adjusted for high dpi) and generic 1080p desktop
      // Note we use a high-res phone due to desktop browsers having a minimum width
      const viewport = mobile
        ? { width: 540, height: 1110 }
        : { width: 1080, height: 720 };
      const image = await fetchSnapshot(html, { browser, debug, viewport });
      expect(image).toBeTruthy();
      expect(image).toMatchImageSnapshot();
    });
  };
  itPassesVisualRegressionTestsOn('chrome');
  itPassesVisualRegressionTestsOn('firefox');
  itPassesVisualRegressionTestsOn('operablink');
}

编辑：我对此进行了测试，这在与快照服务器通信时会导致问题。如果我可以在fetchSnapshot 周围创建锁，我应该没问题...

【讨论】：