开玩笑＆＃x2B; react：it.each（）等待变量

Question

我在带有react的嘲笑文件中有此代码：

import React from 'react';
import thunk from 'redux-thunk';
import { Provider } from 'react-redux';
import ReactDOM from 'react-dom/client';
import { act } from 'react-dom/test-utils';
import HomePage from '../../pages/HomePage';
import configureStore from 'redux-mock-store';

const middlewares = [thunk];
const mockStore = configureStore(middlewares);

jest.setTimeout(15000);
global.IS_REACT_ACT_ENVIRONMENT = true;

describe('test table files', () => {
  let list;
  let allData;
  let store = mockStore({});
  let container = document.createElement('div');
  
  beforeEach((done) => {
    fetch('http://localhost:5050/files/data')
      .then((res) => res.json())
      .then((dat) => {
        allData = dat;
        fetch('http://localhost:5050/files/list')
          .then((res) => res.json())
          .then((fil) => {
            list = fil.files;
            done();
          });
      });

    const allReducers = {
      files: {
        list,
        allData,
      },
    };
    store = mockStore(allReducers);
    container = document.createElement('div');
    document.body.appendChild(container);
  });
  
  afterEach(() => {
    document.body.removeChild(container);
    container = null;
  });
  
  it.each(allData)('testing $file', async ({ file, lines }) => {
    console.log('file', file);
    act(() => {
      ReactDOM.createRoot(container).render(
        <Provider store={store}>
          <HomePage />
        </Provider>
      );
    });
    expect(lines).toMatchSnapshot();
  });
  
});

i ran jest and the variable allData is undefined
i need to run one test for every children in allData Array

alldata是从API

获取的

请帮助我找到一个没有任何外部库的解决方案
请记住，我需要等待alldata是从外部API中获取的

Answer 1

我解决了这个问题，如果您需要解决方案在下面删除

首先我创建jest.config.js file
内容：

const fetch = (...args) => import('node-fetch').then(({ default: fetch }) => fetch(...args));

module.exports = async () => {
  const allData = await (await fetch('http://localhost:5050/files/data')).json();
  const fileList = (await (await fetch('http://localhost:5050/files/list')).json()).files;
    
  return {
    setupFiles: ['./jest.setup.js'],
    testEnvironment: 'jsdom',
    resetMocks: true,
    globals: {
      allData,
      fileList,
    },
  };
};

Store the fetched allData and the fileList data in global

我可以迟到，下一个创建jest.setup.js file
内容：

require（'Whatwg-fetch'）;

仅对于组件中的提取错误
我全部，现在您可以访问获取的数据键入global.alldata或global.filelist.filelist
或您定义的任何变量

global。

测试文件
示例：

describe('test table files', () => {
  it.each(global.allData)('testing $file', async ({ file, lines }) => {
    act(() => {
      ReactDOM.createRoot(container).render(
        <Provider store={store}>
          <HomePage />
        </Provider>
      );
    });

    // expect(lines).toMatchSnapshot();
  });
}