search

bahmutov / integration-tests

React unit and component and E2E tests using Cypress
0 stars 1 forks source link

Unable to get window coverage #1

Open conantteo opened 4 years ago

conantteo commented 4 years ago

Current behavior:

  1. Click on Login.cy-spec.js image

  2. Test works fine but unable to find any coverage information

image

  1. .nyc_output is empty

image

Desired behavior:

Run one or more component test to see generated code coverage report

Test code to reproduce

  1. Fork the repository 
    yarn && yarn dev
  2. Click on Login.cy-spec.js
  3. See test execution and .nyc_output

Versions

Forked from repository Windows 10 Home

bahmutov commented 4 years ago

Not sure why @conantteo - the coverage exists for me, I have added debugging section to the README, maybe you can see what the problem is from the verbose logs https://github.com/bahmutov/integration-tests#debugging

conantteo commented 4 years ago

@bahmutov thanks for the update. I tried to run with debug but I was unable to identify the issue.

  1. I checked that localhost:3000 has window.__coverage__

image

  1. I checked that the chrome opened by cypress open did not have any window.__coverage__ (Tried both Electron 80 and Chrome 81)

image

The logs output from cy open:

$ DEBUG=instrument-cra,cypress-react-unit-test,code-coverage yarn dev
yarn run v1.22.4
$ start-test 3000 cy:open
1: starting server using command "npm run start"
and when url "http://localhost:3000" is responding with HTTP status code 200
running tests using command "npm run cy:open"

> fun-with-tests@0.1.0 start C:\Users\Admin\integration-tests
> react-scripts -r @cypress/instrument-cra start

  instrument-cra path to react-scripts own webpack.config.js: C:\Users\Admin\integration-tests\node_modules\react-scripts\config\webpack.config.js +0ms
  instrument-cra calling real CRA webpack factory with env "development" +2s
i ｢wds｣: Project is running at http://0.0.0.0:3000/
i ｢wds｣: webpack output is served from
i ｢wds｣: Content not from webpack is served from C:\Users\Admin\integration-tests\public
i ｢wds｣: 404s will fallback to /
Starting the development server...
Compiled successfully!

You can now view fun-with-tests in the browser.

  http://localhost:3000

Note that the development build is not optimized.
To create a production build, use yarn build.

> fun-with-tests@0.1.0 cy:open C:\Users\Admin\integration-tests
> cypress open

  cypress-react-unit-test env object { codeCoverageTasksRegistered: true } +0ms
  cypress-react-unit-test coverage is disabled? { coverageIsDisabled: false } +2ms
  cypress-react-unit-test component test folder: C:\Users\Admin\integration-tests\src +0ms
  cypress-react-unit-test top level opts { reactScripts: true, addFolderToTranspile: 'C:\\Users\\Admin\\integration-tests\\src', coverage: true } +1ms
  cypress-react-unit-test webpack options: { mode: 'development', bail: false, devtool: 'cheap-module-source-map', entry: [ 'C:\\Users\\Admin\\integration-tests\\node_modules\\react-dev-utils\\webpackHotDevClient.js', 'C:\\Users\\Admin\\integration-tests\\src\\index.js' ]
, output: { path: undefined, pathinfo: true, filename: 'static/js/bundle.js', futureEmitAssets: true, chunkFilename: 'static/js/[name].chunk.js', publicPath: '/', devtoolModuleFilenameTemplate: [Function], jsonpFunction: 'webpackJsonpfun-with-tests', globalObject: 'this' 
}, optimization: { minimize: false, minimizer: [ [TerserPlugin], [OptimizeCssAssetsWebpackPlugin] ], splitChunks: { chunks: 'all', name: false }, runtimeChunk: { name: [Function: name] } }, resolve: { modules: [ 'node_modules', 'C:\\Users\\Admin\\integration-tests\\node_m
odules' ], extensions: [ '.web.mjs', '.mjs', '.web.js',  '.js', '.json',    '.web.jsx', '.jsx' ], alias: { 'react-native': 'react-native-web' }, plugins: [ [Object], [ModuleScopePlugin] ] }, resolveLoader: { plugins: [ [Object] ] }, module: { strictExportPresence: true, r
ules: [ [Object], [Object], [Object] ] }, plugins: [ HtmlWebpackPlugin { options: [Object], childCompilerHash: undefined, childCompilationOutputName: undefined, assetJson: undefined, hash: undefined, version: 4 }, InterpolateHtmlPlugin { htmlWebpackPlugin: [Function], rep
lacements: [Object] }, ModuleNotFoundPlugin { appPath: 'C:\\Users\\Admin\\integration-tests', yarnLockFile: undefined, useYarnCommand: [Function: bound useYarnCommand], getRelativePath: [Function: bound getRelativePath], prettierError: [Function: bound prettierError] }, D
efinePlugin { definitions: [Object] }, HotModuleReplacementPlugin { options: {}, multiStep: undefined, fullBuildTimeout: 200, requestTimeout: 10000 }, CaseSensitivePathsPlugin { options: {}, logger: [Object], pathCache: {}, fsOperations: 0, primed: false }, WatchMissingNo
deModulesPlugin { nodeModulesPath: 'C:\\Users\\Admin\\integration-tests\\node_modules' }, ManifestPlugin { opts: [Object] }, IgnorePlugin { options: [Object], checkIgnore: [Function: bound checkIgnore] } ], node: { module: 'empty', dgram: 'empty', dns: 'mock', fs: 'empty'
, http2: 'empty', net: 'empty', tls: 'empty', child_process: 'empty' }, performance: false } +1s
  cypress-react-unit-test cleaned webpack options: { mode: 'development', bail: false, devtool: 'cheap-module-source-map', entry: [ 'C:\\Users\\Admin\\integration-tests\\node_modules\\react-dev-utils\\webpackHotDevClient.js', 'C:\\Users\\Admin\\integration-tests\\src\\ind
ex.js' ], output: { path: undefined, pathinfo: true, filename: 'static/js/bundle.js', futureEmitAssets: true, chunkFilename: 'static/js/[name].chunk.js', publicPath: '/', devtoolModuleFilenameTemplate: [Function], jsonpFunction: 'webpackJsonpfun-with-tests', globalObject:
 'this' }, optimization: { minimize: false, minimizer: [ [TerserPlugin], [OptimizeCssAssetsWebpackPlugin] ] }, resolve: { modules: [ 'node_modules', 'C:\\Users\\Admin\\integration-tests\\node_modules' ], extensions: [ '.web.mjs', '.mjs', '.web.js',  '.js', '.json',    '.w
eb.jsx', '.jsx' ], alias: { 'react-native': 'react-native-web' }, plugins: [ [Object], [ModuleScopePlugin] ] }, resolveLoader: { plugins: [ [Object] ] }, module: { strictExportPresence: true, rules: [ [Object], [Object], [Object] ] }, node: { module: 'empty', dgram: 'empt
y', dns: 'mock', fs: 'empty', http2: 'empty', net: 'empty', tls: 'empty', child_process: 'empty' }, performance: false } +7ms
  cypress-react-unit-test found oneOf rule [ { test: [ /\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/ ], loader: 'C:\\Users\\Admin\\integration-tests\\node_modules\\url-loader\\dist\\cjs.js', options: { limit: 10000, name: 'static/media/[name].[hash:8].[ext]' } }, { test: /\.(j
s|mjs|jsx|ts|tsx)$/, include: 'C:\\Users\\Admin\\integration-tests\\src', loader: 'C:\\Users\\Admin\\integration-tests\\node_modules\\react-scripts\\node_modules\\babel-loader\\lib\\index.js', options: { customize: 'C:\\Users\\Admin\\integration-tests\\node_modules\\babel
-preset-react-app\\webpack-overrides.js', babelrc: false, configFile: false, presets: [Array], cacheIdentifier: 'development:babel-plugin-named-asset-import@:babel-preset-react-app@9.1.2:react-dev-utils@10.2.1:react-scripts@3.4.0', plugins: [Array], cacheDirectory: true, 
cacheCompression: false, compact: false } }, { test: /\.(js|mjs)$/, exclude: /@babel(?:\/|\\{1,2})runtime/, loader: 'C:\\Users\\Admin\\integration-tests\\node_modules\\react-scripts\\node_modules\\babel-loader\\lib\\index.js', options: { babelrc: false, configFile: false,
 compact: false, presets: [Array], cacheDirectory: true, cacheCompression: false, cacheIdentifier: 'development:babel-plugin-named-asset-import@:babel-preset-react-app@9.1.2:react-dev-utils@10.2.1:react-scripts@3.4.0', sourceMaps: true, inputSourceMap: true } }, { test: /
\.css$/, exclude: /\.module\.css$/, use: [ 'C:\\Users\\Admin\\integration-tests\\node_modules\\style-loader\\index.js', [Object], [Object] ], sideEffects: true }, { test: /\.module\.css$/, use: [ 'C:\\Users\\Admin\\integration-tests\\node_modules\\style-loader\\index.js',
 [Object], [Object] ] }, { test: /\.(scss|sass)$/, exclude: /\.module\.(scss|sass)$/, use: [ 'C:\\Users\\Admin\\integration-tests\\node_modules\\style-loader\\index.js', [Object], [Object], [Object], [Object] ], sideEffects: true }, { test: /\.module\.(scss|sass)$/, use: 
[ 'C:\\Users\\Admin\\integration-tests\\node_modules\\style-loader\\index.js', [Object], [Object], [Object], [Object] ] }, { loader: 'C:\\Users\\Admin\\integration-tests\\node_modules\\file-loader\\dist\\cjs.js', exclude: [ /\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/ ]
, options: { name: 'static/media/[name].[hash:8].[ext]' } } ] +0ms
  cypress-react-unit-test adding our static image loader +2ms
  cypress-react-unit-test final webpack options { mode: 'development', bail: false, devtool: 'cheap-module-source-map', entry: [ 'C:\\Users\\Admin\\integration-tests\\node_modules\\react-dev-utils\\webpackHotDevClient.js', 'C:\\Users\\Admin\\integration-tests\\src\\index.
js' ], output: { path: undefined, pathinfo: true, filename: 'static/js/bundle.js', futureEmitAssets: true, chunkFilename: 'static/js/[name].chunk.js', publicPath: '/', devtoolModuleFilenameTemplate: [Function], jsonpFunction: 'webpackJsonpfun-with-tests', globalObject: 't
his' }, optimization: { minimize: false, minimizer: [ [TerserPlugin], [OptimizeCssAssetsWebpackPlugin] ] }, resolve: { modules: [ 'node_modules', 'C:\\Users\\Admin\\integration-tests\\node_modules' ], extensions: [ '.web.mjs', '.mjs', '.web.js',  '.js', '.json',    '.web.
jsx', '.jsx' ], alias: { 'react-native': 'react-native-web' }, plugins: [ [Object], [ModuleScopePlugin] ] }, resolveLoader: { plugins: [ [Object] ] }, module: { strictExportPresence: true, rules: [ [Object], [Object], [Object] ] }, node: { module: 'empty', dgram: 'empty',
 dns: 'mock', fs: 'empty', http2: 'empty', net: 'empty', tls: 'empty', child_process: 'empty' }, performance: false } +4ms

logs output after running Login.cy-spec.js:

GET /__/ 200 5.335 ms - -
GET /__cypress/runner/cypress_runner.css 200 2.738 ms - -
GET /__cypress/runner/cypress_runner.js 200 1.225 ms - -
GET /__cypress/runner/popper.js.map 404 0.769 ms - 136
GET /__cypress/iframes/component/LoginModule/components/Login.cy-spec.js 200 3.406 ms - 773
GET /__cypress/runner/fonts/fa-solid-900.woff2 200 0.761 ms - 76120
GET /__cypress/runner/popper.js.map 404 0.618 ms - 136
GET /__cypress/tests?p=src%5CLoginModule%5Ccomponents%5CLogin.cy-spec.js-581 - - ms - -
GET /__cypress/tests?p=cypress%5Csupport%5Cindex.js-983 - - ms - -
GET /__cypress/iframes/component/LoginModule/components/Login.cy-spec.js 200 2.289 ms - 773
GET /__cypress/runner/popper.js.map 404 0.813 ms - 136
GET /__cypress/tests?p=cypress%5Csupport%5Cindex.js-528 200 36.354 ms - -
GET /__cypress/tests?p=src%5CLoginModule%5Ccomponents%5CLogin.cy-spec.js-008 - - ms - -
GET /__cypress/iframes/component/LoginModule/components/Login.cy-spec.js 200 2.050 ms - 773
GET /__cypress/runner/popper.js.map 404 0.498 ms - 136
GET /__cypress/tests?p=cypress%5Csupport%5Cindex.js-060 200 60.475 ms - -
GET /__cypress/tests?p=src%5CLoginModule%5Ccomponents%5CLogin.cy-spec.js-660 200 12.869 ms - -
GET /__cypress/runner/fonts/fa-regular-400.woff2 200 1.306 ms - 13600
  code-coverage reset code coverage in interactive mode +0ms
⚠️ file C:\Users\Admin\integration-tests\.nyc_output\out.json has no coverage information
Did you forget to instrument your web application? Read https://github.com/cypress-io/code-coverage#instrument-your-application
  code-coverage ⚠️ file C:\Users\Admin\integration-tests\.nyc_output\out.json has no coverage information +0ms
  code-coverage ⚠️ file C:\Users\Admin\integration-tests\.nyc_output\out.json has no coverage information +1ms
  code-coverage combined NYC options { 'report-dir': './coverage', reporter: [ 'lcov', 'clover', 'json', 'json-summary' ], extension: [ '.js', '.cjs', '.mjs', '.ts', '.tsx', '.jsx' ], excludeAfterRemap: false } +0ms
  code-coverage calling NYC reporter with options { 'report-dir': 'C:\\Users\\Admin\\integration-tests\\coverage', reporter: [ 'lcov', 'clover', 'json', 'json-summary' ], extension: [ '.js', '.cjs', '.mjs', '.ts', '.tsx', '.jsx' ], excludeAfterRemap: false, tempDir: 'C:\\
Users\\Admin\\integration-tests\\.nyc_output', reportDir: 'C:\\Users\\Admin\\integration-tests\\coverage' } +291ms
  code-coverage current working directory is C:\Users\Admin\integration-tests +1ms
  code-coverage after reporting, returning the report folder name C:\Users\Admin\integration-tests\coverage +92ms
  code-coverage Final coverage in C:\Users\Admin\integration-tests\coverage\coverage-final.json +0ms
  code-coverage There are 0 key(s) in C:\Users\Admin\integration-tests\coverage\coverage-final.json +1ms

On a side note, I know that the code is instrumented when I clicked on cy-spec.js to run the integration test. The logs for running cy-spec.js:

GET /__/ 200 0.702 ms - -
GET /__cypress/runner/cypress_runner.css 200 0.718 ms - -
GET /__cypress/runner/cypress_runner.js 200 0.910 ms - -
GET /__cypress/runner/popper.js.map 404 0.426 ms - 136
GET /__cypress/iframes/integration/cy-spec.js 200 0.886 ms - 733
GET /__cypress/runner/fonts/fa-solid-900.woff2 200 0.820 ms - 76120
GET /__cypress/runner/popper.js.map 404 0.367 ms - 136
GET /__cypress/tests?p=cypress%5Cintegration%5Ccy-spec.js-486 200 3.070 ms - -
GET /__cypress/tests?p=cypress%5Csupport%5Cindex.js-976 200 3.579 ms - -
  code-coverage reset code coverage in interactive mode +18s
GET /__cypress/runner/fonts/fa-regular-400.woff2 200 0.981 ms - 13600
GET /__/ 200 1.760 ms - -
GET /__cypress/runner/cypress_runner.css 200 0.848 ms - -
GET /__cypress/runner/cypress_runner.js 200 1.193 ms - -
GET /__cypress/runner/popper.js.map 404 0.427 ms - 136
GET /__cypress/iframes/integration/cy-spec.js 200 0.830 ms - 733
GET /__cypress/runner/fonts/fa-solid-900.woff2 200 0.858 ms - 76120
GET /__cypress/runner/popper.js.map 404 0.501 ms - 136
GET /__cypress/tests?p=cypress%5Cintegration%5Ccy-spec.js-059 200 11.724 ms - -
GET /__cypress/tests?p=cypress%5Csupport%5Cindex.js-405 200 11.979 ms - -
  code-coverage reset code coverage in interactive mode +2s
GET /__cypress/runner/fonts/fa-regular-400.woff2 200 0.729 ms - 13600
GET / 200 201.811 ms - -
GET /static/js/bundle.js 200 20.077 ms - -
GET /static/js/main.chunk.js 200 27.719 ms - -
GET /static/js/0.chunk.js 200 32.838 ms - -
GET /static/js/bundle.js.map 200 11.319 ms - -
GET /static/js/main.chunk.js.map 200 8.096 ms - -
GET /static/js/0.chunk.js.map 200 15.844 ms - -
  code-coverage parsed sent coverage +2s
  code-coverage wrote coverage file C:\Users\Admin\integration-tests\.nyc_output\out.json +7ms
GET / 200 3.861 ms - -
GET /static/js/bundle.js 304 7.987 ms - -
GET /static/js/0.chunk.js 304 8.304 ms - -
GET /static/js/main.chunk.js 304 9.402 ms - -
GET /static/js/bundle.js.map 304 3.649 ms - -
GET /static/js/0.chunk.js.map 304 12.496 ms - -
GET /static/js/main.chunk.js.map 304 9.968 ms - -
  code-coverage parsed sent coverage +1s
  code-coverage wrote coverage file C:\Users\Admin\integration-tests\.nyc_output\out.json +6ms
  code-coverage parsed sent coverage +9ms
  code-coverage wrote coverage file C:\Users\Admin\integration-tests\.nyc_output\out.json +6ms
  code-coverage NYC file C:\Users\Admin\integration-tests\.nyc_output\out.json has 4 key(s) +24s
  code-coverage 1 key C:\Users\Admin\integration-tests\src\LoginModule\hooks\useLogin.js file path C:\Users\Admin\integration-tests\src\LoginModule\hooks\useLogin.js +1ms
  code-coverage 2 key C:\Users\Admin\integration-tests\src\LoginModule\components\LoginForm.js file path C:\Users\Admin\integration-tests\src\LoginModule\components\LoginForm.js +0ms
  code-coverage 3 key C:\Users\Admin\integration-tests\src\LoginModule\components\Login.js file path C:\Users\Admin\integration-tests\src\LoginModule\components\Login.js +1ms
  code-coverage in file C:\Users\Admin\integration-tests\.nyc_output\out.json all files are not found? false +1ms
  code-coverage NYC file C:\Users\Admin\integration-tests\.nyc_output\out.json has 4 key(s) +0ms
  code-coverage combined NYC options { 'report-dir': './coverage', reporter: [ 'lcov', 'clover', 'json', 'json-summary' ], extension: [ '.js', '.cjs', '.mjs', '.ts', '.tsx', '.jsx' ], excludeAfterRemap: false } +1ms
  code-coverage calling NYC reporter with options { 'report-dir': 'C:\\Users\\Admin\\integration-tests\\coverage', reporter: [ 'lcov', 'clover', 'json', 'json-summary' ], extension: [ '.js', '.cjs', '.mjs', '.ts', '.tsx', '.jsx' ], 
excludeAfterRemap: false, tempDir: 'C:\\Users\\Admin\\integration-tests\\.nyc_output', reportDir: 'C:\\Users\\Admin\\integration-tests\\coverage' } +35ms
  code-coverage current working directory is C:\Users\Admin\integration-tests +0ms
  code-coverage after reporting, returning the report folder name C:\Users\Admin\integration-tests\coverage +173ms
  code-coverage Final coverage in C:\Users\Admin\integration-tests\coverage\coverage-final.json +0ms
  code-coverage There are 4 key(s) in C:\Users\Admin\integration-tests\coverage\coverage-final.json +2ms
  code-coverage ✅ C:\Users\Admin\integration-tests\src\LoginModule\index.js statements covered 2/2 +0ms
  code-coverage ✅ C:\Users\Admin\integration-tests\src\LoginModule\components\Login.js statements covered 5/5 +0ms
  code-coverage ✅ C:\Users\Admin\integration-tests\src\LoginModule\components\LoginForm.js statements covered 8/8 +1ms
  code-coverage ✅ C:\Users\Admin\integration-tests\src\LoginModule\hooks\useLogin.js statements covered 13/13 +0ms