Jest+Rreact: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();
});

});

我运行了jest，变量allData未定义
在allData数组
中，我需要为每个孩子运行一个测试

allData是从api 中提取的

请帮助我找到一个没有任何外部库的解决方案
请记住，我需要等待从外部api 提取allData

Answer 1

我解决了这个问题，如果您需要，下面描述了解决方案

首先，我创建一个jest.config.js文件
，内容为：

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,
},
};
};

将提取的allData和fileList数据存储在全局
中

我可以晚一点阅读，然后创建一个jest.setup.js文件
，内容为：

require('whiwg-fetch')；

仅针对组件中的提取错误
仅此而已，现在您可以访问键入global.allData或global.fileList的提取数据
或使用定义的任何变量

全局。jest.config.js全局部分中的you_variable_defined

在测试文件中
示例：

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();
});
}