How to perform Component Testing using Cypress

lets you try individual UI components in isolation to verify if they act as specify. When you run tests in an stray environment, Cypress drive faster feedback and seamless debugging, thereby helping you espy issues early in the evolution process.

Learn how to perform component testing effectively using Cypress with this step-by-step tutorial.

What is Component Testing?

Component examination is package prove grade or category where each component of the applications is tested separately to check the component are working fine. This method is also called module testing.

Cypress is an Open Source test automation framework built with NodeJS and allows users to write JavaScript or typescript-based automation tryout. Cypress & # 8217; recent adaptation started back component testing. The addition of the component testing makes Cypress a complete testing tool see the support for Component, API, and end-to-end exam. The module-level testing can be done using Cypress.

Why do Component Testing with Cypress

Here are some reasons why you should do portion testing with Cypress:

• Quicker Feedback: Testing individual components make the procedure faster and aid you place number and profit brainwave quicker.
• Isolated Testing: Testing in isolation reduces dependencies and get debugging easier.
• Better Developer Experience: With Cypress & # 8217; s interactional tools, you can debug and maintain factor well.
• Seamless CI/CD Integration: You can contain factor tests into your CI/CD pipeline effortlessly.

Step-by-Step Guide to Component Testing in Cypress

Here ’ s a step-by-step tutorial on how to perform component testing effectively using Cypress:

Prerequisites:

Here are the prerequisites to execute component prove in Cypress

• Install NodeJS
• Navigate to the NodeJSdownload page
• Download the LTS version relevant to your operating system
• Install the NodeJS
• Install Visual Studio Code[optional but recommended]

Navigate to the Visual Studio Codedownloadpage, download, and install

Now, that you get learned about the prerequisites for component testing in Cypress, here is a elaborate tutorial to learn how to execute the tests.

Step 1: Create a sample react application

The component essay needs the application code to be present locally on the machine. Component testing can be do on an covering that habituate any modern fabric such as Vue, React, and Angular. Considering the popularity. In this model, let us use React. The demonstration react application can be downloaded using the scaffold command.

• Open the Ocular Studio Code
• Create a fresh folder (Ex: CypressComponentTestDemo)
• Open Terminal and Type the below command

npm create vite @ modish my-awesome-app -- -- template react

Step 2: Install the required dependence

Using the VSCode terminal, navigate tomy-awesome-appand install the dependencies using the below command.

npm install

Step 3: Install the Cypress tryout automation creature for component testing

Cypress needs to be installed to perform the Component testing; to install Cypress use the below dictation in the end.

npm install cypress -D

Step 4: Open the Cypress

Cypress take to configure for component testing, use the below command to open the Cypress

npx cypress open

Step 5: Configure Component Testing in Cypress

When you open the Cypress, the Cypress window opens. You need to postdate the onscreen instruction to configure Cypress to component testing

1- Choose Component Testing from the welcome window

The Welcome window provides two options namely end-to-end testing and component testing. ClickComponent Testing and Proceed to the Next.

2- Project Setup window

Cypress requires the Front end model information and bundler information for the component testing configuration. Since you have used the scaffold command, Cypress automatically detects both.

Click Next Stepto continue.

3- Install Dev Dependencies

Since you have expend the scaffold dictation and then used thenpm installin Step 2, all the required dependencies are installed; you can but clickContinue.

4- Configuration files

For autonomous testing across multiple user personas, check out SUSATest — it explores your app like 10 different real users.

Cypress automatically creates the requisite basic configuration files, and they will be expose in the & # 8220;Configuration Files& # 8221; window. Review all the files and click onContinue.

5- Browser option window

The main advantage of Cypress part tests is they will be executed on the real browser. For the purpose of this demo, let ’ s choose& # 8220; Chrome & # 8221; and click on Start Component Testing in Chrome.

6- Create Sample Spec

Once you choose the browser option, the window opens; select& # 8220; Create new Empty spec”

When Cypress asks for & # 8220; Enter the route for new spec & # 8221;, simply provide the Name for the Component test example:DemoComponentTest.cy.jsx

Click Create Specand in the future step click& # 8220; Okay, run the Spec & # 8221;

Closethe Cypress Test Runner for Now

Note: The DemoComponentTest.cy.jsxcontains dummy tests, which are not real element tests, you will be make the real constituent tests following steps.

At this point, your project looks as shown below.

Understanding the Cypress Folder/File Structures

1. Components folder:Contains Cypress element specs
2. Fixtures folder:Any datum which can be used inside the specification can be place here
3. Support folder:helper functions, utilities, any reclaimable code, and custom commands can be rank here.
4. Support/component.js:Great property to put the orbicular shape and reusable codification
5. Support/commands.js:In this file, you can create custom commands or reverse survive bidding
6. Cypress.config.js:This file contains runtime configurations such as devServer, framework, bundler, reporter, videos, screenshot options, etc.
7. Package.json:This file tail all installed dependencies and allows you to make a custom commands cutoff

Step 6: Create a Sample React Component

Let & # 8217; s create a simple React component that can be apply for Cypress component testing later.

Navigate tosrcfolder and create a new File with the nameDemoComponent.jsx

Add the ingredient codification below:

//inside src/DemoComponent.jsx import {useState} from 'react' export nonpayment function Demo ({greetings = 'Good Morning '}) {const [greetingMessage] = useState (greetings) return (& lt; div & gt; & lt; div id='message ' & gt; Hello Browserstack! {greetingMessage} & lt; /div & gt; & lt; div id='date ' & gt; & lt; p & gt; Today 's appointment is: {new Date () .toLocaleDateString ()} & lt; /p & gt; & lt; /div & gt; & lt; /div & gt;)}

The above is the elementary React component, which displays the Greeting content and today & # 8217; s date. The demonstration part optionally accepts the greeting message; if not limit, then it displays ‘ Good Morning ’.

Step 7: Create Cypress Component Test

In Step 5, you have created a sampling specification with the gensDemoComponentTest.cy.jsx, which can be located under thecypress/componentsdirectory that has a procurator examination. Let ’ s replace them with actual component test.

There are two scenarios in our part:

• The default Greeting message.
• The customs Greeting message.

Let ’ s pen the Cypress code for both scenario.

In the DemoComponentTest.cy.jsxfile, write two component test cases using Cypress syntax.

//DemoComponentTest.cy.jsx import Demo from ' .. / .. /src/DemoComponent' describe ('Demo Component ', () = & gt; {const dateNow = new Date () .toLocaleDateString () it ('Default Message ', () = & gt; {cy.mount (& lt; Demo/ & gt;) cy.get (' # message ') .should ('have.text ', 'Hello Browserstack! Full Morning ') cy.get (' # date ') .should ('have.text ', 'Today\ 's date is: '+ dateNow)}) it ('Good Evening Message ', () = & gt; {cy.mount (& lt; Demo greetings='Good Evening'/ & gt;) cy.get (' # substance ') .should ('have.text ', 'Hello Browserstack! Good Evening ') cy.get (' # engagement ') .should ('have.text ', 'Today\ 's engagement is: '+ dateNow)})})

• The maiden examination usescy.mount (& lt; Demo/ & gt;)to climb the demo component and to verify if the textbook is displayed correctly.
• The second trial example sends an optional greeting argument as Good Evening while mounting the Demo factor, which will be surpass to the Demo()function ofDemoComponentand will execute the logic accordingly.

Talk to an Expert

Step 8: Execute the Test to view the results

Open the Cypress with the below command

npx cypress open -- component

Choose the browser and execute theDemoComponentTest.cy.jsx tests.

The results look like below:

Cypress Component Testing Tips and Tricks

Here are some effective tips to amend your Cypress factor testing:

• Execute component Tests in headless mode. Cypress component testing can be action in headless style, apply the Cypress CLI. The Cypress CLI accomplish the test faster.

npx cypress run -- component

• Execute Cypress component tests, now in the headed style without manually selecting the examination file. Generally, the headed tryout are executed on the browser, by opt the browser and choose the tests on the test runner window. You can skip all these constituent completely and straightaway execute the tests using the below command.

npx cypress run -- constituent -- headed

• Open the exam runner window directly by jump the browser option. When you open the Cypress, every clip you postulate to prefer the test type as Component screen and then Browser as Chrome/Firefox/Edge, etc you can skip all these steps by specifying the open bidding options like below.

npx cypress open -- component -- browser chrome

• Execute individual component tests. When you receive multiple tests you can execute the individual specification use the & # 8211; spec require line choice.

npx cypress run -- ingredient -- spec cypress/component/DemoComponentTest.cy.jsx

• Use multiple configuration files in Cypress. You can have multiple configuration file in Cypress, while running the tests you can mention the configuration file name using the & # 8211; config-file option.

npx cypress run -- component -- config-file some.config.js

• Specify configuration bidding line. Generally, the configuration file is used to define the Cypress configuration, still, Cypress let to specify theformin the command line using the & # 8211; config option.

npx cypress run -- component -- config video=false

• Test Reporter options. Cypress provides multiple reporter options such as Junit, XML, etc. You can specify the newsman using the & # 8211; reporter choice in Cypress

npx cypress run -- component -- newsperson junit

Why use BrowserStack for Cypress Testing

Here ’ s why you should use BrowserStack for run tests on Cypress effectively:

• : Since Cypress scarper on limited browsers (mostly Chrome-based), you can use BrowserStack to expand your Cypress tests to other browsers, such as Safari, Edge, IE, and more.
• Cloud Infrastructure: BrowserStack is a cloud-based program that doesn ’ t require position up or preserve browsers or physical device locally.
• Parallel Testing: Execute multiple Cypress exam simultaneously and accelerate test execution, as easily as the release cycles with.
• Real-device testing: Access a vast, to run your Cypress tests on 3500+ real gimmick, browser, and OS combination, and test under.
• Integrations: BrowserStack offers seamless with several like,, and more.
• Scalability: BrowserStack supports real-device and parallel prove on a cloud-based infrastructure, permit you run hundreds of Cypress tests across different environments.

Conclusion

Cypress endorse both component examination and in a single framework, so the QA team doesn ’ t have to maintain the multiple frameworks which in turn reduces the maintenance effort.

The Cypress component testing support major frameworks such as Angular, React, Vue, etc; but it is in beta stage. So, some features might not work as wait for all the supported frameworks. Cypress is yet experiencing and adding new features to do it more elastic and stable.

Component quiz prioritizes individual component, and therefore can not actually validate the overall application functionality. The QA team needs to check the application functionality is work as expected before signing off on testing. Therefore it is important perform end-to-end testing on the app by simulating real-user conditions across different platforms.

Browserstack helps to test the covering on thousands of existent devices, without rewrite your existing exam. The cloud testing environment provides the infra with zero maintenance and cross-platform testing provides the confidence to release the codification to product.

Related Guides