javascript-testing-best-practices | 📗🌐 🚢 Comprehensive and exhaustive JavaScript | Testing library

You can try importing the css in the index.ts or index.js file that will be available in the location -> cypress/support/index.ts

I think I worked out the root cause of the issues I was experiencing, I'm posting the solution in case someone else runs into similar issues. I had the following tests configuration:

Yes. One option (since .NET 6) is to make the tested project's internals visible to the test project for example by adding next property to csproj:

One of the speakers said: "you can only expect that storing data to a production service works if only one copy of that test is running at a time."

Right. Imagine if two instances of this code are running. If both Store operations execute before either Load operation takes place, the one whose Store executed first will load the wrong value.

Consider this pattern where the two instances are called "first" and "second":

1. First Store executes, stores first random value.
2. Second Store starts executing, starts storing second random value.
3. First Load is blocked on the second Store completing due to a lock internal to the database
4. Second Load is blocked on the Store completing due to a local internal to the database.
5. Second Store finishes and release the internal lock.
6. First Load can now execute, it gets second random value.
7. EXPECT_EQ fails as the first and second random values are different.

The other speaker said: "Once you add continuous integration in the mix, the test starts failing".

If a CI system is testing multiple instances of the code at the same time, race conditions like the example above can occur and cause tests to fail as the multiple instances race with each other.

The SignUpView is missing a routing context in your test. Import a memory router and wrap the component under test so it has a provided routing context.

from: https://github.com/cypress-io/cypress/issues/7062

1. increase timeout

   cy.visit('https://github.com/', { timeout: 30000 })

Check if the contructor.name of the function is equal to 'AsyncFunction':

On the surface, I don't see any technical difference.

But in terms of readability, data-testid may notice other developers that this is used for test case specifically, while id is may be in terms of styling.

Also id or class selectors can be changed more often if implementation changes.

Reference:

Making your UI tests resilient to change