Jest: Alguns testes de aprovação falharão ao usar a sinalização --coverage

Criado em 8 dez. 2016  ·  3Comentários  ·  Fonte: facebook/jest

Você quer solicitar um recurso ou relatar um bug ?

Erro

Qual é o comportamento atual?

Executar npm test faz com que todos os testes sejam aprovados; entretanto, a execução de npm test -- --coverage causa a falha de alguns testes.

Se o comportamento atual for um bug, forneça as etapas para reproduzir e, se possível, um repositório mínimo no GitHub que possamos npm install e npm test .

Tenho um projeto que contém vários componentes de reação que estou testando usando uma piada e uma enzima. Recentemente, movi-nos de [email protected] para [email protected] e [email protected] para [email protected] . Limpei o diretório node_modules antes de instalar as versões mais recentes.

Eu corro npm test e todos os testes passam. Quando executo npm test -- --coverage , alguns testes falham e o relatório de cobertura é gerado.

Parece que todas as falhas são em torno de um componente sendo renderizado superficialmente com enzima e, em seguida, usando find(selector) para encontrar nós na árvore de renderização. Os nós são encontrados com sucesso durante jest , mas falham em jest --coverage .

Antes da atualização, todos os testes foram aprovados para jest e jest --coverage .

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

Qual é o comportamento esperado?

Eu esperaria que todos os testes passassem em ambas as execuções.

Execute o Jest novamente com --debug e forneça a configuração completa que ele 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

Comentários muito úteis

Adicionar displayName aos seus componentes deve corrigir isso 😄

Istanbul envolve funções com outras funções anônimas e pegamos o nome da função que o nó dá ao componente renderizado :( - @cpojer https://github.com/facebook/jest/issues/1824#issuecomment -250376673

@nsand : Por exemplo, seu componente Icon agora terá a seguinte aparência:

import React from 'react';

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

Icon.displayName = 'Icon';

export default Icon;

Todos 3 comentários

@dmitriiabramov alguma ideia sobre por que isso está acontecendo?

Adicionar displayName aos seus componentes deve corrigir isso 😄

Istanbul envolve funções com outras funções anônimas e pegamos o nome da função que o nó dá ao componente renderizado :( - @cpojer https://github.com/facebook/jest/issues/1824#issuecomment -250376673

@nsand : Por exemplo, seu componente Icon agora terá a seguinte aparência:

import React from 'react';

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

Icon.displayName = 'Icon';

export default Icon;

@rogeliog incrível! Obrigada. Eu estava fazendo uma depuração um pouco atrás e percebi que se eu chamasse children() no invólucro, havia uma diferença visível.

teste npm

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

vs
teste npm - --coverage

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

Onde a diferença é que a função é nomeada por npm test . Portanto, isso parece estar de mãos dadas com o que você postou, e sua proposta de fato resolve o problema. Obrigado, @thymikee e @rogeliog!

Esta página foi útil?
0 / 5 - 0 avaliações