Hello everybody
Does anyone have experience working with Aurelia and Cypress for the end to end testing?
Any working repository or configuration?
If Yes please share with me. I want to have Jest and Cypress for testing in Aurelia.
Thanks.
1 Like
I created a repository for this.
Based on Aurelia-CLI + Jest + Webpack + Typescript + Cypress
I configured Cypress and seems to work with non-Aurelia tests.
For testing Aurelia application I copied the existing test in unit to Cypress integration folder but it does not work.
Can anyone help me to complete this sample?
In the later sample the import of App doesnt seem right, as the Error message suggests. Im pretty sure this should be a relative path
I updated my photos. It is a copy of Aurelia-CLI sample.
Even I changed files and folders config of Cypress but no change.
Cypress.json
{
"integrationFolder": "test"
}
I have no idea.
May I ask you If you have time check this repository?
Sry I’ve no experience with Cypress but given the error it sounds merely like an issue how you import your App component
1 Like
I think you are approaching it in the wrong way.
The test you copied over is a unit test.
Cypress is for e2e tests.
You need to run your Aurelia app, on port 8080 for example, then cy.visit(‘http://localhost:8080/’) inside your cypress test and evaluate the DOM elements etc.
1 Like
Yes, Cypress is well known as the E2E test tool but it works with other kinds of tests. See this
Who Uses Cypress?
Our users are typically developers or QA engineers building web applications using modern JavaScript frameworks.
Cypress enables you to write all types of tests:
- End to end tests
- Integration tests
- Unit tests
Cypress can test anything that runs in a browser.
I have some non-Aurelia and pure tests as Unit and E2E works in this project.
/// <reference types="cypress" />
import expect from "expect";
describe("page", () => {
it("should allow usage of expect directly from jest", () => {
cy.wrap(5).should(subject => {
expect(subject).toEqual(5);
});
cy.wrap({ foo: "bar" }).should(subject => {
expect(subject).toHaveProperty("foo", "bar");
});
});
});
describe('My First Test', function() {
it('get Google site title"', function() {
cy.visit('https://www.google.com/');
cy.title().should('eq', 'Google')
})
})
Hi,
First, great that you are looking at Cypress, it should play nicely with Aurelia projects.
Second, for unit tests, you don’t have to import expect or even use .then callbacks to a simple assert a value. The same test could be simply
cy.wrap(5).should('be.equal', 5)
Third, let’s look at your problem of loading “App” component and crashing. Cypress comes with bundling included, but to bundle an Aurelia component you need to tell Cypress HOW to bundle it. You can point Cypress bundler at the project’s webpack config file for example, but after you get through the code bundling problems the real question becomes: what are you going to do with the “App” component you get? Because it is just that - a reference to a component that is not attached to the browser. Thus you would need an Aurelia-specific way to scaffold or bootstrap “App” component into Cypress’ iframe and then you can do tests the same way as you would normally do in Cypress. So it would be something like this
import mountComponent from 'cypress-aurelia'
import {App} from '../../../src/app'
it('says Hello', () => {
mountComponent(App)
cy.contains('Hello World')
})
Now, package cypress-aurelia does not exist. But there are similar “adaptor” components for pretty much all other frameworks: cypress-react-unit-test, cypress-vue-unit-test, etc. This is something we at Cypress did as an experiment and to cover this middle level of component testing - between unit tests and full e2e tests. Read about it in https://www.cypress.io/blog/2018/04/02/sliding-down-the-testing-pyramid/ (there is also a video linked at the bottom from AssertJS conference).
If you can write a cypress-aurelia package, that’s great, it would enable Aurelia component testing 
Cheers,
4 Likes
Hi @bahmutov
First, I should say thanks for the great explanation.
Second, We should say thank you (and your team) for creating the great framework, Cypress is amazing.
Third, Welcome to the Aurelia community. We are glad to have you here.
Fourth, I understood for loading Aurelia components we should create a cypress-aurelia loader but in general (HTML/JS) Yes Cypress works perfectly with Aurelia.
We converted Aurelia-CLI
Protractor samples to Cypress way and uploaded it here.
Fifth, About writing cypress-aurelia unfortunately I don’t have enough knowledge yet 
perhaps in the future
At the end I have a serious problem I hope to guide me again 
I use Webpack, Typescript, Jest, and Cypress. After adding Cypress to the project expect library in Jest for unit testing does not work.
Can you help me to use Jest expect with Typescript intellisense (it is so important to me) just for unit testing?
I added @types/jest but it does not work.
import {except} from '@types/jest'
I referenced @types/jest but it does not work.
/// <reference types="@types/jest" />;
I don`t know how to fix it with intellisense support.
Thanks 
try to do a import "jest" side effect import somewhere in a setup file, or for the sake of testing in app.spec.ts
1 Like
yeah, seems the expect types from Cypress (which includes Chai type definition) clashes with Jest expect type definitions. I think, but not sure, you can limit where types are applied, see https://github.com/neiltownsley/react-typescript-cypress/pull/1
I guess in his case there wasnt simply any reference to importing jest. Limitation of typings can also be applied via the types prop of compileroptions. Although that would generally exclude chai, not sure how Cypress works here.
1 Like
I still think we are approaching this the wrong way.
The following is a true unit test that only looks at javascript logic.
import App from .../app.js
expect(new App().message).toEqual("Hello World")
The “recommended” way of mounting the App component into the iframe is not really for unit testing anymore. It’s more like integration tests, even though we are not integrating App component with anything besides the browser (iframe) in this case.
1 Like
That’s true, and that’s why @HamedFathi is writing it with jest, the part which is related to how it behaves when rendered should be implemented via e2e testing, and that implemented by cypress. right?
I believe he’s trying to migrate off jest and use Cypress for all types of tests.
@khuongduybui
Nope, You can find the final skeleton here based on Aurelia-CLI structure.
Jest -> Unit testing
Cypress -> E2E Testing
Typescript
Webpack
1 Like
Ohhh. Then this totally makes sense. I must have been confused sure to previous questions.
2 Likes