Testing your software is important. It helps to improve and maintain the quality of your product from development all the way to release. You can get by with manual testing for small-scale apps, but for large-scale apps with multiple developers, automated testing is the preferred solution.
At the time of this writing, unit testing libraries are not preloaded into the projects you generate with the Ionic CLI; The Ionic team is working to include this feature in a future update. In the meantime, we’ll show you how to set up a unit testing environment for an existing Ionic app and how to write and run a sample test. For this walkthrough, Jasminewill be our test framework and Karma will serve as our test runner.
Note: If you haven’t created your ionic project yet, you can start with the repo provided in step 1. It includes the unit testing configuration already injected, which is what we’ll be adding below.
Here’s my environment configuration:
1. Clone the ionic test demo repo
2. Import the test-config directory from the demo repo
In the root of the unit-testing-demo project, there should be a test-config directory. Drag and drop this directory into the root of your existing ionic project. In this example, my existing project is called testing-sample.
3. Update the browser configuration in your karma.conf.js file
Open the test-config/karma.conf.js file and add the following property to the _config JSON:
Why did I need to do that?
In a few more steps, we’re going to run a test and view the results in the web browser. If you don’t include the property shown above in your karma.conf.js file, the test results won’t remain visible in your web browser after you run karma; They will flash for a brief moment and then get wiped from the page.
4. Add the required node dependencies to your existing project
From the root directory of your project, execute the following npm command:
5. Define the test command in your package.json
Since we’ll be using karma as our test runner, we need to specify it in the script we define.
Your scripts property in package.json should look something like this:
6. Write a test script
Karma is configured to look for files ending in .spec.ts. I have a component in my project called home.ts, so I’m going to write a test script for it in the same directory called home.spec.ts.
Here are the contents of my home.ts file:
…and this is the contents of my home.spec.ts file:
All I’m doing with this test script is making an instance of the HomePage component and then testing to ensure it contains a variable called userName.
7. Start the test runner
From the root of your project, run the following command:
npm start test
This will open the web browser and give you the following output:
Also, the output from your terminal should look something like this:
If you see this, your environment has been properly configured and you’re ready to write more test scripts.
Possible Errors
If you’re getting this error in your test results console…
…try adding declare var require: any; to your src/typings.d.ts file. If the file doesn’t exist in your program, you can create it and paste this single line of code in it.