
I was looking for a quick and easy way to put together a personal static site and _almost_ went with Svelte Sapper because I've been enjoying it so much using it for another side project. But in the end I decided to use Next.js instead because it has been around for a while (Sapper is modeled after it), it is so incredibly easy to deploy using Zeit's Now for free, and I wanted to use TypeScript without the hassle of trying to get it to work with Svelte (which apparently _is_ possible). I also wanted to brush up on React since it had been a while.  
  
Here's my target front-end stack:  

*   [Next.js](https://github.com/zeit/next.js)  
    
*   [TypeScript](https://www.typescriptlang.org/)  
    
*   [Material UI](https://material-ui.com/)  
    
*   [Jest](https://jestjs.io/) with [Enzyme](https://airbnb.io/enzyme/)  
    

After working with the Next.js and Material UI examples to get a good starting template, here's the final result, which I plan on starting with for static sites moving forward:

[github.com/benjohns1/next-ts-mui-jest-template](https://github.com/benjohns1/next-ts-mui-jest-template) [![](/images/posts/template-screenshot.png)](https://github.com/benjohns1/next-ts-mui-jest-template)  
  
Grab it and try it out yourself!  
```
npx degit https://github.com/benjohns1/next-ts-mui-jest-template my-project
cd my-project
npm i
npm run dev

```


I was looking for a quick and easy way to put together a personal static site and...

Next.js with TypeScript, Material UI, and Jest


A few weeks ago, I decided to try [Svelte](https://svelte.dev/)'s [Sapper framework](https://sapper.svelte.dev/) to handle the front-end of a simple app. I'm using this small project to try out some new technologies and to practice TDD/BDD. I had already built a back-end API in Go so just needed to build and wire-up a UI. I don't have a lot of experience in modern front-end tech or end-to-end testing, so I was excited to see that Sapper comes ready-to-use with the [Cypress test framework](https://www.cypress.io/). I was able to write some simple BDD(ish) tests to define the functionality I wanted and then implement in Svelte fairly seamlessly. Overall this was a natural and fluid flow, after overcoming a small gotcha.

### Cypress Tests Stall After Visiting New Pages

Most of my tests started with a cy.visit(url) to ensure a fresh page reload, but I quickly found that any click or DOM action within my Svelte components timed-out and failed sporadically, but frequently:  
CypressError: Timed out retrying: Expected to find \[...\]  
  
I believe this was due to the fact that Sapper does an excellent job of preloading and chunking out the app code and data asynchronously, so Cypress identified that the page was completely loaded and continued with the test script before all of the Sapper app chunks had actually been fully loaded.  
  
Initially, I solved this with a hacky cy.visit(url).wait(1000) that would wait for 1 second after the page loaded. Using wait() for something like this is pretty horrible practice, but it allowed me to continue development. But anyone who has worked with UI or E2E testing knows that one of the biggest issues is the time it takes to run them. Even with my little app only partially completed, testing time quickly ballooned out to over a minute to run all the tests due to the full second of wait time.  

#### Solution

My final solution uses Svelte's lifecycle functions to set a DOM attribute when all components are available. Use the onMount() function in the top-level routes/\_layout.svelte component, wait an additional tick() to ensure all child components had been loaded, then set an attribute in the DOM that Cypress can easily check:

<Code language="svelte">
{`
// File: src/routes/\_layout.svelte

<script>
	import Nav from '../components/Nav.svelte';
	import { onMount, tick } from 'svelte';

	export let segment;

	let testID = 'loading';
	onMount(() => {
		tick().then(() => {
			testID = 'loaded';
		});
	});
</script>

<style>
  ...
</style>

<Nav {segment}/>

<main data-test={testID}>
	<slot></slot>
</main>
`}
</Code>

In Cypress create a simple command called visitWait or similar that waits for the correct attribute value:  

<Code language="javascript">
{`
// File: cypress/support/commands.js

Cypress.Commands.add("visitWait", (url, options) => {
  cy.visit(url, options);
  cy.get('[data-test=loaded]');
});
`}
</Code>

In your tests, simply use cy.visitWait(url) as you would normally use cy.visit(url) and Cypress will wait just long enough for all the Svelte components to load before continuing with your test script.


A few weeks ago, I decided to try Svelte's Sapper framework to handle the front-end of a simple app...

front-end

Next.js with TypeScript, Material UI, and Jest

Setting Up Cypress for Svelte's Sapper