Jest: Algunas pruebas que pasen fallarán al usar la marca --coverage

Creado en 8 dic. 2016 · 3Comentarios · Fuente: facebook/jest

¿Quieres solicitar una función o informar de un error ?

Insecto

¿Cuál es el comportamiento actual?

Al ejecutar npm test todas las pruebas pasan; sin embargo, la ejecución de npm test -- --coverage provoca que algunas pruebas fallen.

Si el comportamiento actual es un error, proporcione los pasos para reproducir y, si es posible, un repositorio mínimo en GitHub que podamos npm install y npm test .

Tengo un proyecto que contiene varios componentes de reacción que estoy probando usando broma y enzima. Recientemente, subí de [email protected] a [email protected] y [email protected] a [email protected] . Limpié el directorio node_modules antes de instalar las versiones más nuevas.

Ejecuto npm test y todas las pruebas pasan. Cuando ejecuto npm test -- --coverage , algunas pruebas fallan y se genera el informe de cobertura.

Parece que todas las fallas se deben a que un componente se renderiza superficialmente con enzima y luego se usa find(selector) para buscar nodos en el árbol de renderización. Los nodos se encuentran correctamente durante jest , pero fallan en jest --coverage .

Antes de la actualización, todas las pruebas pasaron por jest y jest --coverage .

Repo: https://github.com/nsand/jest-coverage

¿Cuál es el comportamiento esperado?

Esperaría que todas las pruebas pasen para ambas ejecuciones.

Ejecute Jest nuevamente con --debug y proporcione la configuración completa que imprime.

node @ v6.9.1
npm @3.10.8
OS macOS Sierra

jest version = 17.0.3
test framework = jasmine2
config = {
  "coverageDirectory": "/Users/dev/workspaces/component-project/.gh-pages/coverage",
  "moduleNameMapper": [
    [
      "^.+\\.(scss)$",
      "/Users/dev/workspaces/component-project/lib/styleMock.js"
    ]
  ],
  "rootDir": "/Users/dev/workspaces/component-project",
  "name": "-Users-dev-workspaces-component-project",
  "setupFiles": [
    "/Users/dev/workspaces/component-project/node_modules/babel-polyfill/lib/index.js"
  ],
  "testRunner": "/Users/dev/workspaces/component-project/node_modules/jest-jasmine2/build/index.js",
  "transform": [
    [
      "^.+\\.jsx?$",
      "/Users/dev/workspaces/component-project/node_modules/babel-jest/build/index.js"
    ]
  ],
  "usesBabelJest": true,
  "automock": false,
  "bail": false,
  "browser": false,
  "cacheDirectory": "/var/folders/46/446113_55dgdfk3jsptqtd2c0000gn/T/jest",
  "coveragePathIgnorePatterns": [
    "/node_modules/"
  ],
  "coverageReporters": [
    "json",
    "text",
    "lcov",
    "clover"
  ],
  "expand": false,
  "globals": {},
  "haste": {
    "providesModuleNodeModules": []
  },
  "mocksPattern": "__mocks__",
  "moduleDirectories": [
    "node_modules"
  ],
  "moduleFileExtensions": [
    "js",
    "json",
    "jsx",
    "node"
  ],
  "modulePathIgnorePatterns": [],
  "noStackTrace": false,
  "notify": false,
  "preset": null,
  "resetMocks": false,
  "resetModules": false,
  "snapshotSerializers": [],
  "testEnvironment": "jest-environment-jsdom",
  "testPathDirs": [
    "/Users/dev/workspaces/component-project"
  ],
  "testPathIgnorePatterns": [
    "/node_modules/"
  ],
  "testRegex": "(/__tests__/.*|\\.(test|spec))\\.jsx?$",
  "testURL": "about:blank",
  "timers": "real",
  "transformIgnorePatterns": [
    "/node_modules/"
  ],
  "useStderr": false,
  "verbose": null,
  "watch": false,
  "collectCoverage": true,
  "cache": false,
  "watchman": true
}

Confirmed

Fuente

nsand

Comentario más útil

Agregar displayName a sus componentes debería solucionarlo 😄

Istanbul envuelve funciones con otras funciones anónimas y tomamos el nombre de la función que el nodo le da al componente renderizado :( - @cpojer https://github.com/facebook/jest/issues/1824#issuecomment -250376673

@nsand : Por ejemplo, su componente Icon ahora se verá así:

import React from 'react';

const Icon = ({ name }) => (
  <i className={`fa-icon fa-icon--${name}`}></i>
);

Icon.displayName = 'Icon';

export default Icon;

rogeliog en 9 dic. 2016

👍7 🎉1

Todos 3 comentarios

@dmitriiabramov ¿Alguna idea sobre por qué está sucediendo esto?

thymikee en 8 dic. 2016

Agregar displayName a sus componentes debería solucionarlo 😄

Istanbul envuelve funciones con otras funciones anónimas y tomamos el nombre de la función que el nodo le da al componente renderizado :( - @cpojer https://github.com/facebook/jest/issues/1824#issuecomment -250376673

@nsand : Por ejemplo, su componente Icon ahora se verá así:

import React from 'react';

const Icon = ({ name }) => (
  <i className={`fa-icon fa-icon--${name}`}></i>
);

Icon.displayName = 'Icon';

export default Icon;

rogeliog en 9 dic. 2016

👍7 🎉1

@rogeliog ¡Increíble! Gracias. Estaba haciendo una depuración hace un poco y noté que si llamaba a children() en el contenedor, había una diferencia visible.

prueba npm

 [ { '$$typeof': Symbol(react.element),
           type: [Function: Icon],
           key: null,
           ref: null,
           props: [Object],
           _owner: null,
           _store: {} } ]

vs
prueba npm - --cobertura

[ { '$$typeof': Symbol(react.element),
           type: [Function],
           key: null,
           ref: null,
           props: [Object],
           _owner: null,
           _store: {} } ]

Donde la diferencia es que la función se nombra por npm test . Entonces, esto parece ir de la mano con lo que publicó, y su propuesta realmente soluciona el problema. ¡Gracias, @thymikee y @rogeliog!

nsand en 9 dic. 2016

¿Fue útil esta página

0 / 5 - 0 calificaciones