We are back to
https://github.com/saucelabs-training/automation-best-practices
and will work here for the rest of the workshop!
Everything will only be taught from
my-react-app
directory
✅How to write a component test
✅How to add a test id to our web app
✅How to correctly test a link and a tab
✅How to replace e2e tests with component tests
We are back to
https://github.com/saucelabs-training/automation-best-practices
and will work here for the rest of the workshop!
- Stop all servers from previous session (
Ctrl + C
everything) - cd
my-react-app
npm install
npm start
Open application at http://localhost:3000/
Expected Behavior | Tested? | Test Type | Technologies |
---|---|---|---|
Application renders | 🙅♂️ | Component/UI/unit | React testing library, Jest |
Learn React link goes to correct location | 🙅♂️ | ||
Learn React link opens in new tab | 🙅♂️ | ||
App looks as expected on web and mobile | 🙅♂️ | ||
Front-end performance is at least a B | 🙅♂️ | ||
App is secure | 🙅♂️ | ||
Multiple other testing types... | 🙅♂️ |
- How about making sure that our app renders?
npx cypress open
- Write a test to ensure our app renders
cypress/integration/exercise.spec.js
✅ App has corresponding class visible
✅ App renders in UI
❓ Does the app look as intended
❓ Does the app work as intended
✅ Confirms rendering works as expected
✅ Confirms server is running
- Need a browser
- Need a server
- Need to deal with network issues
- Test will be slower
- Need an extra dependency (Cypress)
- Need to learn extra dependency API
Can we test the same thing more efficiently❓
There are a few ways to test React components. Broadly, they divide into two categories:
- Rendering component trees in a simplified test environment and asserting on their output.
- Running a complete app in a realistic browser environment (also known as “end-to-end” tests)
Source: Yoni Goldberg
❌ browser
❌ server
❌ network issues
✅ Tests run in ms
❌ extra dependency (Cypress)
❌ extra dependency API
Our app was created using create-react-app
. With this method, we automatically get a few cool things for testing:
- @testing-library
- jest
- And we get an automatic component test in
src/App.test.js
//Exercise.test.js
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
Testing Library is an opinionated framework that helps with component rendering and interactions.
Jest is a test runner and provides a bunch of capabilities like matchers and snapshot testing
Cypress doesn't support component tests yet. So we need to use other libraries.
- Stop Cypress server
- In your current directory (my-react-app), execute
npm run test
.- The tests should pass, even though our app isn't running.
💡 'p' to filter tests down to a specific file 💡 'o' to run tests only in the changed files
Ever wondered how easy it is to add an attribute to an HTML element? Let's provide a better locator for our app.
- Open
my-react-app/src/App.js
- In the
<a>
of the App component add adata-testid
property
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
data-testid="learn-link"
>
- Open
src/__tests__/Exercise.test.js
- Update the test to have this line of code instead
const linkElement = screen.getByTestId('learn-link');
- Save and the test will automatically rerun
Expected Behavior | Tested? | Test Type | Technologies |
---|---|---|---|
Application renders | ✅ | Component | React testing library, Jest |
Learn React link goes to correct location | 🙅♂️ | ||
Learn React link opens in new tab | 🙅♂️ | ||
App looks as expected on web and mobile | 🙅♂️ | ||
Front-end performance is at least a B | 🙅♂️ | ||
App is secure | 🙅♂️ | ||
Multiple other testing types... | 🙅♂️ |
Here's an e2e test to validate that a link works
it('should click link',()=>{
cy.visit('/');
cy.get('[data-testid=learn-link]').click().url().should('contain','ultimateqa.com');
})
- Cypress will never have multi-tab support
- We should never need to test that a link is clickable, this is the browser's native behavior
- We should never need to test that a link opens a new tab
🏋️♀️Write a test to validate link behavior
💡We don't need a browser to actually test a link click, so why not use a fast component test?
- Make sure that you run
npm test
if it's not running already - Go to
src/__tests__/Exercise.test.js
and write a test that looks like this
test('link has correct url', () => {
//render our App component in a virtual DOM
render(<App />);
const linkElement = screen.getByTestId('learn-link')
expect(linkElement.href).toContain('ultimateqa');
})
- Save and the test runs automatically
❓What does this check actually test❓
❓What if we wanted to test that the link opens in a new tab❓
👀 Working with 'target' attribute
🏋️♀️Write a component test to validate that link opens in a new tab
❓Is our app fully tested now❓
Expected Behavior | Tested? | Test Type | Technologies |
---|---|---|---|
Application renders | ✅ | Component | React testing library, Jest |
Learn React link goes to correct location | ✅ | Component | React testing library, Jest |
Learn React link opens in new tab | ✅ | Component | React testing library, Jest |
App looks as expected on web and mobile | 🙅♂️ | ||
Front-end performance is at least a B | 🙅♂️ | ||
App is secure | 🙅♂️ |
✅An e2e test (Cypress) tests the connection from the front-end to the back-en
✅Most of the functionality of a modern web app (React, Vue, Angular) can be tested with component tests in a virtual DOM. We did this by testing links, tabs, and correct HTML