make tests more reliable

Author: kentcdodds

exercises/01.js-hello-world/01.solution.hello/index.test.ts

@@ -1,11 +1,19 @@
-import { expect, testStep } from '@epic-web/workshop-utils/test'
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
 
-await testStep('"Hello World" is rendered to the DOM', () => {
+await testStep('"Hello World" is rendered to the DOM', async () => {
 	const rootElement = document.getElementById('root')
 	expect(rootElement, 'root element not found').to.be.instanceOf(HTMLElement)
 
-	const element = rootElement!.querySelector('.container')
-	expect(element, 'container element not found').to.be.instanceOf(HTMLElement)
+	const element = await dtl.waitFor(
+		async () => {
+			const element = rootElement!.querySelector('.container')
+			expect(element, 'container element not found').to.be.instanceOf(
+				HTMLElement,
+			)
+			return element
+		},
+		{ timeout: 5000 },
+	)
 
 	expect(element!.textContent, 'element text is not correct').to.equal(
 		'Hello World',

exercises/01.js-hello-world/02.solution.root/index.test.ts

@@ -1,11 +1,19 @@
-import { expect, testStep } from '@epic-web/workshop-utils/test'
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
 
-await testStep('"Hello World" is rendered to the DOM', () => {
+await testStep('"Hello World" is rendered to the DOM', async () => {
 	const rootElement = document.getElementById('root')
 	expect(rootElement, 'root element not found').to.be.instanceOf(HTMLElement)
 
-	const element = rootElement!.querySelector('.container')
-	expect(element, 'container element not found').to.be.instanceOf(HTMLElement)
+	const element = await dtl.waitFor(
+		async () => {
+			const element = rootElement!.querySelector('.container')
+			expect(element, 'container element not found').to.be.instanceOf(
+				HTMLElement,
+			)
+			return element
+		},
+		{ timeout: 5000 },
+	)
 
 	expect(element!.textContent, 'element text is not correct').to.equal(
 		'Hello World',

exercises/02.raw-react/01.solution.elements/index.test.ts

@@ -1,11 +1,19 @@
-import { expect, testStep } from '@epic-web/workshop-utils/test'
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
 
-await testStep('"Hello World" is rendered to the DOM', () => {
+await testStep('"Hello World" is rendered to the DOM', async () => {
 	const rootElement = document.getElementById('root')
 	expect(rootElement, 'root element not found').to.be.instanceOf(HTMLElement)
 
-	const element = rootElement!.querySelector('.container')
-	expect(element, 'container element not found').to.be.instanceOf(HTMLElement)
+	const element = await dtl.waitFor(
+		async () => {
+			const element = rootElement!.querySelector('.container')
+			expect(element, 'container element not found').to.be.instanceOf(
+				HTMLElement,
+			)
+			return element
+		},
+		{ timeout: 5000 },
+	)
 
 	expect(element!.textContent, 'element text is not correct').to.equal(
 		'Hello World',

exercises/02.raw-react/02.solution.nesting/index.test.ts

@@ -1,12 +1,21 @@
-import { expect, testStep } from '@epic-web/workshop-utils/test'
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
 
-await testStep('"Hello World" is rendered to the DOM', () => {
+await testStep('"Hello World" is rendered to the DOM', async () => {
 	const rootElement = document.getElementById('root')
 	expect(rootElement, 'root element not found').to.be.instanceOf(HTMLElement)
 	if (!rootElement) return
 
-	const element = rootElement.querySelector('.container')
-	expect(element, 'container element not found').to.be.instanceOf(HTMLElement)
+	const element = await dtl.waitFor(
+		() => {
+			const element = rootElement!.querySelector('.container')
+			expect(element, 'container element not found').to.be.instanceOf(
+				HTMLElement,
+			)
+			return element
+		},
+		{ timeout: 5000 },
+	)
+
 	if (!element) return
 
 	if (element.textContent === 'HelloWorld') {

exercises/02.raw-react/03.solution.deep-nesting/index.test.ts

@@ -1,12 +1,21 @@
-import { expect, testStep } from '@epic-web/workshop-utils/test'
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
 
-await testStep('Proper elements are rendered to the DOM', () => {
+await testStep('Proper elements are rendered to the DOM', async () => {
 	const rootElement = document.getElementById('root')
 	expect(rootElement, 'root element not found').to.be.instanceOf(HTMLElement)
 	if (!rootElement) return
 
-	const element = rootElement.querySelector('.container')
-	expect(element, 'container element not found').to.be.instanceOf(HTMLElement)
+	const element = await dtl.waitFor(
+		() => {
+			const element = rootElement!.querySelector('.container')
+			expect(element, 'container element not found').to.be.instanceOf(
+				HTMLElement,
+			)
+			return element
+		},
+		{ timeout: 5000 },
+	)
+
 	if (!element) return
 
 	const p = element.querySelector('p')

exercises/03.using-jsx/01.solution.compiler/content.test.ts

@@ -1,14 +1,19 @@
-import { expect, testStep } from '@epic-web/workshop-utils/test'
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
 
-// wait for babel to compile and evaluate the JSX
-await new Promise(resolve => setTimeout(resolve, 100))
-
-await testStep('"Hello World" is rendered to the DOM', () => {
+await testStep('"Hello World" is rendered to the DOM', async () => {
 	const rootElement = document.getElementById('root')
 	expect(rootElement, 'root element not found').to.be.instanceOf(HTMLElement)
 
-	const element = rootElement!.querySelector('.container')
-	expect(element, 'container element not found').to.be.instanceOf(HTMLElement)
+	const element = await dtl.waitFor(
+		async () => {
+			const element = rootElement!.querySelector('.container')
+			expect(element, 'container element not found').to.be.instanceOf(
+				HTMLElement,
+			)
+			return element
+		},
+		{ timeout: 5000 },
+	)
 
 	expect(element!.textContent, 'element text is not correct').to.equal(
 		'Hello World',

exercises/03.using-jsx/02.solution.interpolation/content.test.ts

@@ -1,14 +1,19 @@
-import { expect, testStep } from '@epic-web/workshop-utils/test'
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
 
-// wait for babel to compile and evaluate the JSX
-await new Promise(resolve => setTimeout(resolve, 100))
-
-await testStep('"Hello World" is rendered to the DOM', () => {
+await testStep('"Hello World" is rendered to the DOM', async () => {
 	const rootElement = document.getElementById('root')
 	expect(rootElement, 'root element not found').to.be.instanceOf(HTMLElement)
 
-	const element = rootElement!.querySelector('.container')
-	expect(element, 'container element not found').to.be.instanceOf(HTMLElement)
+	const element = await dtl.waitFor(
+		async () => {
+			const element = rootElement!.querySelector('.container')
+			expect(element, 'container element not found').to.be.instanceOf(
+				HTMLElement,
+			)
+			return element
+		},
+		{ timeout: 5000 },
+	)
 
 	expect(element!.textContent, 'element text is not correct').to.equal(
 		'Hello World',

exercises/03.using-jsx/03.solution.spread/content.test.ts

@@ -1,14 +1,19 @@
-import { expect, testStep } from '@epic-web/workshop-utils/test'
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
 
-// wait for babel to compile and evaluate the JSX
-await new Promise(resolve => setTimeout(resolve, 100))
-
-await testStep('"Hello World" is rendered to the DOM', () => {
+await testStep('"Hello World" is rendered to the DOM', async () => {
 	const rootElement = document.getElementById('root')
 	expect(rootElement, 'root element not found').to.be.instanceOf(HTMLElement)
 
-	const element = rootElement!.querySelector('.container')
-	expect(element, 'container element not found').to.be.instanceOf(HTMLElement)
+	const element = await dtl.waitFor(
+		async () => {
+			const element = rootElement!.querySelector('.container')
+			expect(element, 'container element not found').to.be.instanceOf(
+				HTMLElement,
+			)
+			return element
+		},
+		{ timeout: 5000 },
+	)
 
 	expect(element!.textContent, 'element text is not correct').to.equal(
 		'Hello World',

exercises/03.using-jsx/04.solution.nesting/content.test.ts

@@ -1,15 +1,21 @@
-import { expect, testStep } from '@epic-web/workshop-utils/test'
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
 
-// wait for babel to compile and evaluate the JSX
-await new Promise(resolve => setTimeout(resolve, 100))
-
-await testStep('Proper elements are rendered to the DOM', () => {
+await testStep('Proper elements are rendered to the DOM', async () => {
 	const rootElement = document.getElementById('root')
 	expect(rootElement, 'root element not found').to.be.instanceOf(HTMLElement)
 	if (!rootElement) return
 
-	const element = rootElement.querySelector('.container')
-	expect(element, 'container element not found').to.be.instanceOf(HTMLElement)
+	const element = await dtl.waitFor(
+		() => {
+			const element = rootElement!.querySelector('.container')
+			expect(element, 'container element not found').to.be.instanceOf(
+				HTMLElement,
+			)
+			return element
+		},
+		{ timeout: 5000 },
+	)
+
 	if (!element) return
 
 	const p = element.querySelector('p')

exercises/03.using-jsx/05.solution.fragments/content.test.ts

@@ -1,17 +1,21 @@
-import { expect, testStep } from '@epic-web/workshop-utils/test'
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
 
-// wait for babel to compile and evaluate the JSX
-await new Promise(resolve => setTimeout(resolve, 100))
-
-await testStep('Proper elements are rendered to the DOM', () => {
+await testStep('Proper elements are rendered to the DOM', async () => {
 	const rootElement = document.getElementById('root')
 	expect(rootElement, 'root element not found').to.be.instanceOf(HTMLElement)
 	if (!rootElement) return
 
 	const element = rootElement
 
-	const p = element.querySelector('p')
-	expect(p, '<p> not found').to.be.instanceOf(HTMLElement)
+	const p = await dtl.waitFor(
+		async () => {
+			const p = element.querySelector('p')
+			expect(p, '<p> not found').to.be.instanceOf(HTMLElement)
+			return p
+		},
+		{ timeout: 5000 },
+	)
+
 	const ul = element.querySelector('ul')
 	expect(ul, '<ul> not found').to.be.instanceOf(HTMLElement)
 	expect(ul).to.have.class('sams-food')

exercises/04.components/01.solution.function/content.test.ts

@@ -1,15 +1,21 @@
-import { expect, testStep } from '@epic-web/workshop-utils/test'
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
 
-// wait for babel to compile and evaluate the JSX
-await new Promise(resolve => setTimeout(resolve, 100))
-
-await testStep('Proper elements are rendered to the DOM', () => {
+await testStep('Proper elements are rendered to the DOM', async () => {
 	const rootElement = document.getElementById('root')
 	expect(rootElement, 'root element not found').to.be.instanceOf(HTMLElement)
 	if (!rootElement) return
 
-	const element = rootElement.querySelector('.container')
-	expect(element, 'container element not found').to.be.instanceOf(HTMLElement)
+	const element = await dtl.waitFor(
+		() => {
+			const element = rootElement!.querySelector('.container')
+			expect(element, 'container element not found').to.be.instanceOf(
+				HTMLElement,
+			)
+			return element
+		},
+		{ timeout: 5000 },
+	)
+
 	if (!element) return
 
 	const messages = Array.from(element.querySelectorAll('.message'))

exercises/04.components/02.solution.raw/content.test.ts

@@ -1,15 +1,21 @@
-import { expect, testStep } from '@epic-web/workshop-utils/test'
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
 
-// wait for babel to compile and evaluate the JSX
-await new Promise(resolve => setTimeout(resolve, 100))
-
-await testStep('Proper elements are rendered to the DOM', () => {
+await testStep('Proper elements are rendered to the DOM', async () => {
 	const rootElement = document.getElementById('root')
 	expect(rootElement, 'root element not found').to.be.instanceOf(HTMLElement)
 	if (!rootElement) return
 
-	const element = rootElement.querySelector('.container')
-	expect(element, 'container element not found').to.be.instanceOf(HTMLElement)
+	const element = await dtl.waitFor(
+		() => {
+			const element = rootElement!.querySelector('.container')
+			expect(element, 'container element not found').to.be.instanceOf(
+				HTMLElement,
+			)
+			return element
+		},
+		{ timeout: 5000 },
+	)
+
 	if (!element) return
 
 	const messages = Array.from(element.querySelectorAll('.message'))

exercises/04.components/03.solution.jsx/content.test.ts

@@ -1,15 +1,21 @@
-import { expect, testStep } from '@epic-web/workshop-utils/test'
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
 
-// wait for babel to compile and evaluate the JSX
-await new Promise(resolve => setTimeout(resolve, 100))
-
-await testStep('Proper elements are rendered to the DOM', () => {
+await testStep('Proper elements are rendered to the DOM', async () => {
 	const rootElement = document.getElementById('root')
 	expect(rootElement, 'root element not found').to.be.instanceOf(HTMLElement)
 	if (!rootElement) return
 
-	const element = rootElement.querySelector('.container')
-	expect(element, 'container element not found').to.be.instanceOf(HTMLElement)
+	const element = await dtl.waitFor(
+		() => {
+			const element = rootElement!.querySelector('.container')
+			expect(element, 'container element not found').to.be.instanceOf(
+				HTMLElement,
+			)
+			return element
+		},
+		{ timeout: 5000 },
+	)
+
 	if (!element) return
 
 	const messages = Array.from(element.querySelectorAll('.message'))

exercises/04.components/04.solution.props/content.test.ts

@@ -1,18 +1,20 @@
-import { expect, testStep } from '@epic-web/workshop-utils/test'
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
 
-// wait for babel to compile and evaluate the JSX
-await new Promise(resolve => setTimeout(resolve, 100))
-
-await testStep('Proper elements are rendered to the DOM', () => {
+await testStep('Proper elements are rendered to the DOM', async () => {
 	const rootElement = document.getElementById('root')
 	expect(rootElement, 'root element not found').to.be.instanceOf(HTMLElement)
 	if (!rootElement) return
 
 	const element = rootElement
 
-	const h1 = element.querySelector('h1')
-	expect(h1, 'h1 not found').to.be.instanceOf(HTMLElement)
-	expect(h1!.textContent).to.equal('Calculator')
+	await dtl.waitFor(
+		() => {
+			const h1 = element.querySelector('h1')
+			expect(h1, 'h1 not found').to.be.instanceOf(HTMLElement)
+			expect(h1!.textContent).to.equal('Calculator')
+		},
+		{ timeout: 5000 },
+	)
 
 	const codeElements = Array.from(element.querySelectorAll('code'))
 	expect(codeElements, 'code elements not found').to.have.length(4)