Este Stack Overflow descreve o problema em detalhes:
http://stackoverflow.com/questions/38651209/how-can-i-wrap-an-import-with-jsdom
Mas basicamente minha pergunta é a seguinte: jsdom tem que "embrulhar" o código para ser usado, mas é impossível "embrulhar" uma importação de módulo ES6 (ou seja, import foo form 'bar'
) porque eles têm que vir antes de qualquer código. E se o código que usa DOM fizer parte da própria importação, ele precisa ser encapsulado por JSDom
Existe uma maneira de contornar isso?
Como os módulos JS não são suportados em nenhum mecanismo, provavelmente você está usando algum transpiler como Babel ou TypeScript para converter sua fonte para JavaScript normal e compatível que pode ser executado em Node.js ou navegadores. Você deve fazer a mesma coisa antes de alimentar seu código para jsdom. Não temos intenção de oferecer suporte a algo que ainda não está implementado em navegadores.
Bem, estou usando o Babel, como parte do Mocha, ou seja, mocha --compilers js:babel-core/register test.js
. Portanto, estou usando um transpiler "antes de alimentar [meu] código para jsdom." Simplesmente não ajuda, por causa do problema que descrevi.
É verdade que os módulos ES6 são novos e não são suportados no navegador, então eu entenderia totalmente não suportá-los. No entanto, as principais bibliotecas estão usando-os em sua documentação como se fossem o padrão (por exemplo, Redux, http://redux.js.org/docs/basics/ExampleTodoList.html) ... o que faz sentido porque eles (discutivelmente) são o sistema de módulo padrão para JS.
Acho que o que estou dizendo é que os módulos ES6 não estão indo embora, e esse problema parece ser intrínseco a eles. O JSDom pode resolver o problema agora ou chutar a lata no caminho (uma opção _totalmente_ legítima), mas, no final das contas, se a biblioteca vai funcionar com esse padrão cada vez mais popular, alguém terá que resolver o problema.
De qualquer forma, obrigado por considerar o problema.
Existem dois problemas que você está encontrando aqui.
Em primeiro lugar, obrigado pelo link do wiki; foi uma peça do quebra-cabeça que me levou à solução (neste blog incrível: http://www.2ality.com/2014/09/es6-modules-final.html). Como explica, _existe_ uma maneira de fazer importações de forma que possam ser agrupadas por JSDom: System.import
.
Aqui está a solução para o problema para outros amantes do ES6 / JSDom:
import jsdom;
jsdom({
html: '<div></div>',
done: () => {
// don't do this:
// import setup from 'setup';
// do this:
System.import('setup')
.then((setup) => {
// test code that uses setup
})
}
});
NOTA: Se você estiver usando uma estrutura de teste como o Mocha, você precisará usar sua funcionalidade de teste assíncrona para fazer isso funcionar (ou seja, você precisa de um argumento done
em sua função it
, e então você precisará invocar done
após a conclusão do teste).
De qualquer forma, espero que ajude alguém a seguir por esse caminho, e obrigado novamente pela ajuda em resolvê-lo.
Comentários muito úteis
Em primeiro lugar, obrigado pelo link do wiki; foi uma peça do quebra-cabeça que me levou à solução (neste blog incrível: http://www.2ality.com/2014/09/es6-modules-final.html). Como explica, _existe_ uma maneira de fazer importações de forma que possam ser agrupadas por JSDom:
System.import
.Aqui está a solução para o problema para outros amantes do ES6 / JSDom:
NOTA: Se você estiver usando uma estrutura de teste como o Mocha, você precisará usar sua funcionalidade de teste assíncrona para fazer isso funcionar (ou seja, você precisa de um argumento
done
em sua funçãoit
, e então você precisará invocardone
após a conclusão do teste).De qualquer forma, espero que ajude alguém a seguir por esse caminho, e obrigado novamente pela ajuda em resolvê-lo.