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
}
@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!
Comentários muito úteis
Adicionar
displayName
aos seus componentes deve corrigir isso 😄@nsand : Por exemplo, seu componente
Icon
agora terá a seguinte aparência: