I have both node tests and Angular(4x) tests in the same repository and I am using jest as the test framework. Since both type of tests use different transforms, my idea is to use different jest configurations with different testRegex. Below is my folder structure.
--e2e
|-----app.e2e-spec.ts
--src
--api
|-----ping.spec.ts
|-----card.spec.ts
--util
|-----util.spec.ts
--web
--app
|-----app.spec.ts
--test.spec.ts
In my jest configuration for angular tests, I am using the following regex.
"testRegex": "(/src/web/.*\\.spec)\\.ts?$",
The idea is to execute all spec.ts files under src/web/ and its subdirectories.
In my jest configuration for node tests, I am using the following regex.
"testRegex": "(^((?!.*src/web).).*spec\\.ts.*$)",
For my node tests, I want to execute all spec.ts files excluding the ones in src/web and e2e/. My testRegex excludes all files under src/web. How can I modify that to add e2e also to that regex. Since I'm new to jest, any other suggestions on how to implement this are welcome too.
Wrap src/web in parentheses and add |e2e/:
"testRegex": "(^((?!.*(src/web|e2e/)).).*spec\\.ts.*$)",
Example
Related
I am writing unit tests for my React JS components in a specific folder using Jest testing framework. All my components are within, let's say, "src/components" folder. I can get the coverage of each test adding "--coverage" flag when I run the command as follow.
jest --watchAll --coverage
It's going to generate the report in the coverage folder and I can view the code coverage of each tests as follow.
That is going to display the code coverage of each component that is included in the tests. But how can I see the list of components that are not yet covered in the tests (maybe the list of components that are not yet covered in the tests within a specific folder). Is it possible to get the stats for that in percentage too? How can I do that? Is it possible?
Add the collectCoverageFrom paths to your extra folders, using the glob pattern. For instance, I have:
collectCoverage: true,
collectCoverageFrom: [
'<rootDir>/**/*.ts',
'!<rootDir>/**/*.interface.ts',
'!<rootDir>/**/*.mock.ts',
'!<rootDir>/**/*.module.ts',
'!<rootDir>/**/__mock__/*',
'!<rootDir>/src/main.ts'
],
For example, I want to have all js files in the folder app to be included when I find related tests, and I'd like to exclude one file let's say its name is exclude.js, how would I write my Jest command?
jest --findRelatedTests FILE_PATH_PATTERN_REGEX_I_WANT_TO_KNOW
Here's my try
jest --findRelatedTests dir/s/b app\*.js | find /v "exclude.js"
The windoes dir command part seems to work, but I wasn't quite sure how to get this to be treated as an argument when I run the jest command.
Also, is it possible to combine findRelatedTests with changedSince?
It's kind of confusing how jest -o works. Based on the documentation, I thought that it runs the related tests of uncommited files, so it should behave like findRelatedTests + changedSince. But I did jest -o and it runs everything even though my repo didn't have any changes compared to the previous revision.
I'm using webpack resolve.extensions to "selectively" bundle my js files.
eg.
App.js
import MyComp from 'comp/myComp';
in comp/ folder I have:
MyComp.web.js
MyComp.ios.js
MyComp.android.js
Now I want to write test for App.js, to test how it render as web. But the problem is Jest keep resolving all 3 .js files and that causes dependency error because I'm not running the command in a mobile environment and most mobile modules will not work.
how can I tell jest to only resolve .js and .web.js files just like webpack?
I added this to my package.json and it keep resolving .ios.js and .android.js
"moduleFileExtensions": ["web.js", "js", "jsx"],
"moduleDirectories": [
"node_modules",
"main"]
I tried as suggested with:
"testPathIgnorePatterns": ["<rootDir>/node_modules/", "^.+\\.(android|ios)\\.js$"],
looks no effects :(
You can also remap files to an empty file
touch empty.js
In your jest config add following
moduleNameMapper: {
'\\.(css|jpg|png|scss|less|sass)$': '<rootDir>/empty.js',
},
Works perfect for me
You can add testPathIgnorePatterns to your package.json file. The value is an array of regex patterns. Any file/path that matches an expression will be ignored/skipped from testing.
See these Jest docs for more detail
I have a project that is using webpack to bundle all code into a single file. The project is using Typescript and it is working fine at the moment.
I've gone to add unit testing and jasmine seems to be the way (one of the many ways) forward. Its actually jasmine-core that is included in the package.json - not sure how much of a difference that makes.
So running a very simple test such as
it('true is true', function(){ expect(true).toEqual(true); });
works fine.
But when I add tests that require the use of an import - eg
import MyService = require('./MyServices');
then when I run the tests it complains as it doesn't know what 'require' is.
Uncaught ReferenceError: require is not defined
Now I'm guessing this is because I need to package up the test module in a similar way that I package up the main project.
So what is the best way to do this?
Should I have multiple entry points in the webpack.config.js file - one for each *.spec.ts file?
Or is there a way to have say accept an unknown number of spec files
entry:[ *.spec.ts ] and have it output a js file for each one - *.spec.js
You can use karma/karma-webpack to run all the tests using webpack for resolving the imports. You can take a look at this repository for a simple configuration.
You can also specify an index.spec.ts as en entry point and make this file require all the spec files if you don't want to make one entry point for each spec.ts in your webpack's configuration file.
I started learning how to test Angular apps, and ran into some problems.
I generated an Angular app using Yeoman. yo angular --minsafe AppName
Then generated a service yo angular:service MyService
Wrote a simple method in the service, and a test for it, just to make sure that everything was working. I ran grunt test and the tests passed.
Now it gets interesting, as I added Underscore to the mix using bower install underscore and added a <script> tag for it in the index.html.
Then I added some simple code to the service method, just _.map([1,2,3], function(el){return el+1}); to see if Underscore was working.
I ran the tests again grunt test, and it failed saying that _ is not defined.
I tought that, because Underscore attaches the _ variable to the window object, it would be available for the testing. Am I wrong?
Also, when I ran the application in the browser, Underscore was defined and working.
So, my question is, how do you test an Angular app that uses Underscore? Is this a common problem or am I doing something wrong?
Thanks,
Petar
If you see the karma.conf.js file generated by Yeoman, you will see that bower components are not added automatically.
// list of files / patterns to load in the browser
files = [
JASMINE,
JASMINE_ADAPTER,
'app/bower_components/angular/angular.js',
'app/bower_components/angular-mocks/angular-mocks.js',
'app/scripts/*.js',
'app/scripts/**/*.js',
'test/mock/**/*.js',
'test/spec/**/*.js'
];
Just add the underscore folder to it and you won't have any issues.
Using constants like JASMINE or JASMINE_ADAPTER is deprecated in Jasmine version before 2.0. Use frameworks: ['jasmine'] in the karma.conf.js file instead.