create-react-app `jest.setTimeout`没有效果,

ykejflvf  于 6个月前  发布在  React
关注(0)|答案(6)|浏览(70)

描述bug

在使用 jest.setTimeout() 进行长时间的异步测试时,在 create-react-app 中没有效果。
当在 create-react-app 中一次运行完全相同的测试,并仅使用 jest 直接运行时,会出现以下错误:

thrown: "Exceeded timeout of 5000 ms for a test.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

仅使用 jest 时,测试通过。

这似乎与从 3.4.44.0.0 的变化有关,因为当针对 react-scripts 版本的 3.4.4 运行相同的测试时,测试也通过。

你尝试恢复依赖项了吗?

是的

在用户指南中搜索了哪些术语?

timeout , setTimeout => 没有结果

环境

Environment Info:

  current version of create-react-app: 4.0.0
  running from /Users/fm/.npm/_npx/61035/lib/node_modules/create-react-app

  System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
  Binaries:
    Node: 12.19.0 - ~/.nvm/versions/node/v12.19.0/bin/node
    Yarn: 1.22.5 - ~/.yarn/bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v12.19.0/bin/npm
  Browsers:
    Chrome: 86.0.4240.198
    Edge: Not Found
    Firefox: 81.0.2
    Safari: 14.0.1
  npmPackages:
    react: 17.0.1 => 17.0.1 
    react-dom: 17.0.1 => 17.0.1 
    react-scripts: 4.0.0 => 4.0.0 
  npmGlobalPackages:
    create-react-app: Not Found

重现步骤

仅 Jest
  1. 克隆仓库 issue-timeout-jest
  2. npm install
  3. npm run test (按预期通过)
带有 CRA
  1. 克隆仓库 issue-timeout-cra
  2. npm install
  3. npm run test

预期行为

测试应该通过:

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total

实际行为

测试失败,抛出以下错误:

thrown: "Exceeded timeout of 5000 ms for a test.
    Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total

可复现的演示

issue-timeout-jest : https://github.com/martinfrancois/issue-timeout-jest
issue-timeout-cra : https://github.com/martinfrancois/issue-timeout-cra

rhfm7lfc

rhfm7lfc1#

我也遇到了同样的问题,Jest.setTimeout对timeout没有效果。

ghhaqwfi

ghhaqwfi2#

我遇到了和你一样的问题,我不知道如何直接回答你的问题。
然而,如果你或者别人正在使用 axios 进行 HTTP 请求,moxios 是一个库,它允许你以几乎相似的语法获得期望的结果。
在我看来,github repo 是完全详尽的。
无论如何,快速了解一下几种适用的方法之一:

test('mocking a request', (done) => {
	/*
When using moxios you get a done cb in the test's callback function.
You have to call him when you want to inform moxios that he no longer
has to wait, the (mocked) answer has come and the test can give its result.
*/
	let wrapper = setupWrapper(); // shallow(<ComponentName />)
	let mockedResponse = {
		status: 200,
		response: 'successfull (but mocked)',
	};

	wrapper.find('ul').simulate('click');
	/*
Let's suppose that the click corresponds to the fetching of 1 comment (by Axios!)
that is inserted in the list.
*/
	moxios.wait(() => {
		let request = moxios.requestas.mostRecent();
		// catch the reference to the request just made

		// and override the content passing mockedResponse in the promise below
		request.respondWith(mockedResponse).then(() => {
			wrapper.update();
			expect(wrapper.find('ul').children().length).toEqual(1);
			wrapper.unmount();
			done();
		});
	});
});

重要的是,在 beforeEach()afterEach() 中,你需要分别调用方法 moxios.install()moxios.uninstall()
希望这对某人有所帮助。我现在正在学习 React 的测试。如果我意识到了你问题的直接答案,我会回来编辑这个评论。

ffx8fchx

ffx8fchx3#

是的,使用模拟可以消除一些长时间运行的测试的需求,这意味着你不会碰到这个问题。对于那些带着包含对后端真实调用的测试的人来说,一定要像@didof建议的那样使用moxios,或者如果你正在使用fetch,你可以使用https://github.com/wheresrhys/fetch-mock,我也在使用https://github.com/mswjs/msw时有很好的体验。
然而在我们的案例中,我们已经对调用进行了模拟,但测试仍然需要超过5秒,所以对我们来说不幸的是,这不是一个选项。

yr9zkbsy

yr9zkbsy4#

我们也遇到了同样的问题。我们通过Jest对组件进行可视化回归测试,在升级到react scripts 4.0.0后,所有测试都失败了,因为它们经常需要超过5秒的时间。我们确实需要解决这个问题。

pb3s4cty

pb3s4cty5#

可能的解决方法:

  1. it 中添加第三个参数。例如,改为 it('runs slow', () => {...}, 10000)
  2. 按照此处的说明,将 jest.setTimeout(10000); 写入名为 src/setupTests.js 的文件中。
9bfwbjaz

9bfwbjaz6#

ribeaud可以确认,这两个解决方法确实有效!

相关问题