在我的Angular项目中,我决定删除jasmine和karma,使用jest和testing-library。我决定在“用例”概念下应用我的测试策略。这意味着:我的测试是在组件上进行的,我只会模拟基础设施层(在这种情况下,API --> HttpClient的请求)。
出于这个原因,我决定使用Testbed来准备我的组件,并使用HttpClientTestingModule来模拟请求。
一切都很顺利,除了我尝试在同一个测试中使用HttpClientTestingModule的模拟,@angular/core/testing
的扩展(fakeAsync()
和tick()
)和testing-library。
所以,我有这个测试工作:
function mockGet(url: string, response: object): void {
const httpMock = TestBed.inject(HttpTestingController)
const mockRequest = httpMock.expectOne(url)
mockRequest.flush(response)
}
describe('MY COMPONENT', () => {
beforeEach(async () => {
TestBed.configureTestingModule({
declarations: [],
imports: [HttpClientTestingModule, MyModule],
}).compileComponents()
await TestBed.compileComponents()
})
describe('when render component', () => {
it('call to endpoint to get data', fakeAsync(async () => {
await render(OrdersComponent, {})
mockGet('/status', {
detail: 'not recalculating',
})
tick()
mockGet('/data', [])
}))
})
describe('When is recaltulating', () => {
it('show recalcualting loader', async () => {
await render(OrdersComponent, {})
mockGet('/status', {
detail: 'recalculating',
})
expect(await screen.findByText('Recalculating')).toBeInTheDocument()
})
})
})
字符串
正如你所看到的,我有一个使用fakeAsync()
和tick()
的测试,还有其他使用testing-library的测试。
但是,如果我尝试使用fakeAsync和tick以及testing-library添加一个测试:
[...]
describe('When is not recalculating', () => {
it('show data', fakeAsync(async () => {
const { detectChanges } = await render(OrdersComponent, {})
mockGet('/status', {
detail: 'not recalculating',
})
tick()
mockGet('/data', 'some_text_from_data')
expect(await screen.findByText('some_text_from_data)).toBeInTheDocument()
//discardPeriodicTasks()
//detectChanges()
//flush()
}))
})
[...]
型
这是给我一个错误:“1定期计时器(s)仍然在队列中。”
我试过使用discardPeriodicTasks()
(和flush()
),但没有解决这个问题。甚至,我试过使用testing-library中的detectChanges或waitFor进行一些更改,但我不能让测试变成绿色。
另外,我不知道这是否相关,但我展示给你看:
在我试图修复这个问题的几个小时内,我做了很多变化,不止一次我得到这个错误:
TypeError: Converting circular structure to JSON
--> starting at object with constructor 'Zone'
| property '_zoneDelegate' -> object with constructor '_ZoneDelegate'
--- property 'zone' closes the circle
at stringify (<anonymous>)
at messageParent (node_modules/jest-worker/build/workers/messageParent.js:33:19)
型
这是我在Stackoverflow上的第一篇文章,我希望我的解释已经很清楚了。
PS:对不起,我的英语水平不好XD
1条答案
按热度按时间798qvoo81#
我认为原因是在
fakeAsync
Package 函数中使用了await
。尝试将await
替换为flush()
:字符串