Unit testing with nock

[yakirn]

I'm trying to test my async actions with nock, but with no success. after installing and importing nock I get some warnings and errors in console:

WARNING in ./~/nock/lib/scope.js Module not found: Error: Cannot resolve module 'fs' in ~/myproj/node_modules/nock/lib @ ./~/nock/lib/scope.js 21:7-20

WARNING in ./~/nock/lib/back.js Module not found: Error: Cannot resolve module 'fs' in ~/myproj/node_modules/nock/lib @ ./~/nock/lib/back.js 17:7-20

WARNING in ./~/nock/lib/interceptor.js Module not found: Error: Cannot resolve module 'fs' in ~/myproj/node_modules/nock/lib @ ./~/nock/lib/interceptor.js 15:9-22

ERROR in ./~/mkdirp/index.js Module not found: Error: Cannot resolve module 'fs' in ~/myproj/node_modules/mkdirp @ ./~/mkdirp/index.js 2:9-22

I'm not sure if this is the cause of the error, or how to fix this. I tried to debug the unit tests: after running npm run test:watch I went to http://localhost:8080 in chrome and clicked the debug button. I can debug the Unit Tests' code and it seems fine, but my app's code is uglified. I tried to change the devtool config for test to source-map but now I can't see the files at all (in chrome devtool) I'm out of ideas, would appreciate any help / suggestions... Thanks

[yakirn]

I found out that nock is not intended to use in the browser, so I replaced it with https://github.com/wheresrhys/fetch-mock. now my tests all pass :) but I would still like to know how to make my source readable and debuggable during tests. (in chrome, the tests code looks fine, but the app's code looks like this:

(function (url, options) {
         __cov_WwdkyT1CqMYU$JFGod8nKg.f['15']++;__cov_WwdkyT1CqMYU$JFGod8nKg.s['52']++;return fetch(url, options).then(function (response) {
            __cov_WwdkyT1CqMYU$JFGod8nKg.f['16']++;__cov_WwdkyT1CqMYU$JFGod8nKg.s['53']++;return response.json().then(function (json) {
               __cov_WwdkyT1CqMYU$JFGod8nKg.f['17']++;__cov_WwdkyT1CqMYU$JFGod8nKg.s['54']++;return { json: json, response: response };
            });
         }).then(function (_ref) {
            __cov_WwdkyT1CqMYU$JFGod8nKg.f['18']++;__cov_WwdkyT1CqMYU$JFGod8nKg.s['55']++;var json = _ref.json;__cov_WwdkyT1CqMYU$JFGod8nKg.s['56']++;var response = _ref.response;__cov_WwdkyT1CqMYU$JFGod8nKg.s['57']++;if (!response.ok) {
               __cov_WwdkyT1CqMYU$JFGod8nKg.b['14'][0]++;__cov_WwdkyT1CqMYU$JFGod8nKg.s['58']++;return Promise.reject(json);
            } else {
               __cov_WwdkyT1CqMYU$JFGod8nKg.b['14'][1]++;
            }__cov_WwdkyT1CqMYU$JFGod8nKg.s['59']++;return json;
         });
      })

)

[weblogixx]

Hi @yakirn,

I would also recommend looking into using sinon for mocking and stubbing.

The code gets transpiled before the tests are run, thats the reason it is not original.

However, you may open your browsers dev tools (I recommend Chrome for this) and look at the provided sourcemap.

There you may set breakpoints in the original code.

If you are not able to find the sourcemap, I will send you a screenshot tomorrow.

Hope that hels!

[yakirn]

I'm using sinon, but it's fake XMLHttpRequest feature is not working with fetch. for now it works better for me to fake the server's reply using fetch-mock instead of mocking the source object. I know how to view the source map when running my web app, but I can't find it when debugging the tests (if you can send a screenshot of that it would be great). just to be clear, in the test, I can see the test's code, but not the app's code. here are some screenshots:

Thanks!

[yakirn]

after giving it a second look, maybe what we see in the test has something to do with the code coverage feature? if so, do you happen to know an easy way to temporarily turn it off, in order to debug the tests?

[weblogixx]

Hi @yakirn,

I will have a look at this. You can disable the coverage information as stated on the projects README.md (just comment out the lines from karma.conf.js as described to remove them).

[yakirn]

Thanks @weblogixx

[weblogixx]

It seems that it is in fact related to the coverage generation. Currently, you will have to disable it to get valid sourcemap support. Maybe we can fix this up in the next major release version.