reactjs - Todos os imports estão indefinidos para um módulo durante a execução do teste Jest

Erro estranho com Jest, create-react-app e TypeScript.

Hoje à noite, o Jest começou a falhar ao importar corretamente o meu módulo "./ProcessStore". Este módulo é uma dependência transitiva de algo que meus testes importam.

O erro que vejo é que a coisa que eu importo está indefinida.

Quando eu faço import * as what from "./ProcessStore" e faço log(what), ele imprime todas as exports, mas os valores são indefinidos. Tipo {default: undefined, ResourceChange: undefined} duas classes que são exportadas. Deveria ser {default: <uma classe>, ResourceChange: <uma classe>}.

É apenas aquele arquivo. Todos os outros arquivos funcionam.

Quando eu uso npm start, funciona --- este é apenas um problema do Jest.

Além disso, se eu renomear o arquivo corrompido para, digamos, ./ProcessStore2, ele também funciona.

Eu tentei ./node_modules/jest --clearCache, o que não ajudou.

Caso seja relevante, estou usando o craco normalmente. Voltar temporariamente para o react-scripts não ajudou.

Estou usando react-scripts 4.0.3 (última versão).

O que está acontecendo? Como eu conserto esse problema bobo?

Resposta #1

Isso foi causado por uma dependência circular no meu projeto.

A dependência circular estava fazendo com que o Jest retornasse um módulo vazio. Eu acredito que na segunda vez que um módulo é acessado, ele terá conteúdos indefinidos.

No meu caso, a cadeia foi ProcessStore.ts -> stores.ts -> ProcessStore.ts. Então, quando stores.ts carrega ProcessStore.ts, a store do processo já foi carregada, então tudo está indefinido.

Resposta #2

Eu também encontrei esse problema, devido a uma dependência circular.

Para confirmar a natureza do bug, eu console.log a importação ausente e executei meu teste. Pude ver que a importação estava, de fato, undefined quando não deveria estar.

Eu executei este comando para encontrar dependências circulares no nível de pacote/projeto:

npx madge --circular --extensions ts,tsx .

No entanto, isso só me deu uma pista sobre o que estava acontecendo.

Então eu usei o debugger no ponto onde minha dependência circular estava ocorrendo. Usando o Chrome DevTools, eu inspecionei a pilha de chamadas e descobri como cada importação estava sendo importada. Isso revelou a dependência circular de maneira muito clara. Para mim, essa foi a parte mais importante para desenredar a dependência circular.