[solved] Jasmine/Karma returns Failed: regeneratorRuntime is not defined

Help Requests
1

Solution:

Hi,
I’m learning how to do component testing but have no idea how to proceed with Failed: regeneratorRuntime is not defined error.

I’m using aurelia-store based on Dwayne Charrington’s blog post.

I’ve tried following some examples (see below) I’ve found but probably did it incorrectly.

This is the project repo if it helps.

Examples I’ve found:

I’m working with:

  • aurelia-cli: "1.0.1"
  • alameda: "latest"
  • aurelia-store: "1.4.0"

Component.spec:

import { bootstrap } from "aurelia-bootstrapper"
import { StageComponent } from "aurelia-testing"

describe("Stage Nav-Header Component", () => {
  let component

  beforeEach(() => {
    component = StageComponent
      .withResources("resources/elements/nav-header")
      .inView(`<nav-header></nav-header>`)

    component.bootstrap((aurelia) => {
      aurelia.use
        .standardConfiguration()
        .plugin("aurelia-store", {
          initialState: { isSignin: false },
        })
    })
  })

  afterEach(() => component.dispose())

  it("should have 3 <li></li>", (done) => {
    component
      .create(bootstrap)
      .then(() => {
        const view = document.querySelectorAll("ul li")
        expect(Array.from(view).length).toBe(3)
        done()
      })
      .catch((e) => {
        fail(e)
        done()
      })
  })
})

Component (.js):

import { inject } from "aurelia-framework"
import { Router } from "aurelia-router"
import { connectTo, dispatchify } from "aurelia-store"
import { pluck, distinctUntilChanged } from "rxjs/operators"

import { HTTP } from "http"
import { storeActions } from "store-actions"

@connectTo({
  selector: {
    isSignin: (store) => store.state.pipe(
      pluck("present", "isSignin"),
      distinctUntilChanged()
    ),
  },
})
@inject(Router, HTTP)
export class NavHeader {
  constructor (Router, HTTP) {
    this.router = Router
    this.http = HTTP
  }

  async signout () {
    if (this.isSignin) {
      const response = await this.http.post({ url: "users/signout" })
      dispatchify(storeActions.setIdentifier)(response.data.identifier)
    }

    dispatchify(storeActions.toggleIsSignin)()
    dispatchify(storeActions.setUsername)()
    dispatchify(storeActions.setUserId)()
    this.router.navigateToRoute("jobs")
  }
}

Component (.html):

<template>
  <nav class="truncated">
    <a route-href="route: jobs;" class="truncated">JobPostr</a>

    <ul class="truncated">
      <li class="truncated">
        <a route-href="route: jobs;" class="truncated">Jobs</a>
      </li>
      <li if.bind="!isSignin" class="truncated">
        <a route-href="route: signin;" class="truncated">Sign-in</a>
      </li>
      <li if.bind="!isSignin" class="truncated">
        <a route-href="route: signup;" class="truncated">Sign-up</a>
      </li>
      <li if.bind="isSignin" class="truncated">
        <a route-href="route: new-job;" class="truncated">New-Job</a>
      </li>
      <li if.bind="isSignin" class="truncated">
        <button class="truncated" click.delegate="signout()">Sign-out</button>
      </li>
    </ul>
  </nav>
</template>

HTTP:

import { inject } from "aurelia-framework"
import { json, HttpClient } from "aurelia-fetch-client"

@inject(HttpClient)
export class HTTP {
  constructor (HttpClient) {
    HttpClient.configure((config) => {
      config
        .withBaseUrl("api/")
        .withDefaults({
          mode: "same-origin",
          credentials: "same-origin",
          headers: {
            "Accept": "application/json",
            "X-Requested-With": "Fetch",
          },
        })
    })

    this.http = HttpClient
  }

  fetch (resource, init) {
    return (
      this.http
        .fetch(resource, init)
        .then((response) => response.json())
        .then((data) => data)
        .catch((error) => {
          console.log(error)
        })
    )
  }

  ...

  post ({ url, obj = null }) {
    let data = { method: "POST" }

    if (obj) {
      data["headers"] = { "Content-Type": "application/json" }
      data["body"] = json(obj)
    }

    return this.fetch(url, data)
  }

  ...

}

store-actions:

import { nextStateHistory, rehydrateFromLocalStorage } from "aurelia-store"

import { storeContainer } from "store-container"

export const storeActions = {
  toggleIsSignin: (state, data = false) => {
    return nextStateHistory(state, {
      ...state.present,
      isSignin: data,
    })
  },
  ...
}

storeContainer.registerAction("rehydrateFromLocalStorage", rehydrateFromLocalStorage)
storeContainer.registerAction("toggleIsSignin", storeActions.toggleIsSignin)
...

export const storeUnregisterActions = () => {
  storeContainer.unregisterAction(rehydrateFromLocalStorage)
  storeContainer.unregisterAction(storeActions.toggleIsSignin)
  ...
}

store-container:

import { Container } from "aurelia-framework"
import { Store } from "aurelia-store"

export const storeContainer = Container.instance.get(Store)
1 Like
2

RegeneratorRuntime is a lib that babel uses to support async/await syntax.

If you create a new auerlia app with similar config, you can see the extra import in src/main.js and also the test setup test/setup.js (or test/unit/setup.js I don’t remember exact). Make similar code adjustment in your app and install that npm package.

2 Likes
3

Can’t find the solution button so marking this reply as solution

Solution:

Thanks @huochunpeng . This solved the error.

2 Likes