some way to synthesize test workflow with cypress

[joaomelo]

Hi there,
Cypress is awesome.

I really feel Cypress is the best solution for me regarding e2e testing. But while adopting it was a great experience, it came with a pain point. Now I have to track both a dashboard for unit tests (in Jest, but it could be any similar tool) and another for the Cypress Test runner.

It may doesn't seem much, but IMO as moving parts amount, it's harder and harder to continue being productive, especially in small teams or solo dev. So many things to start and check at the same time... what was I programming anyway?

I researched some approaches to migrate my unit tests to Cypress since the stack for assertions can be easily reused for that problem. I came upon the recipes for unit testing, but (one link is broken and) I couldn't find out how to put this in watch mode similar to "jest watch" or "cypress open."

So, I was wondering if there is:
... a way to make unit tests in cypress run in some form of watch mode?
... a goal to provide some unified dashboard for the whole test suite during dev time? This became more explicit now with the arrival (in version 7) of another dashboard to run Cypress component testing.

Thank you for the attention,
Stay healthy,
JM

[bahmutov]

Thanks for reporting a broken obsolete link.

We just announced the official component testing strategy starting with React and Vue testing, read https://www.cypress.io/blog/2021/04/06/introducing-the-cypress-component-test-runner/ This approach will solve your problems and the tests will watch both the spec and the source files and will re-run automatically.

The component tests and the e2e tests will be reported similarly to the Cypress Dashboard, so a single source of truth will be there. Hope it answers your questions.

[joaomelo]

Thank you, @bahmutov.

Great delivery. Cypress is clearly evolving fast and furious.

After reading the post, I couldn't figure (since it is not the post's goal) if I can use use the new component test runner to unit test non-visual code like this:

describe('firebase app module', () => {
  test('basic app initialization does no break', () => {
    const suite = initFirebaseSuiteFromEnv();
    const sameSuite = initFirebaseSuiteFromEnv();

    expect(suite.app).toEqual(sameSuite.app);
  });
});