Jsdom: Como posso usar JSDom com a sintaxe do módulo ES6?

Criado em 29 jul. 2016  ·  4Comentários  ·  Fonte: jsdom/jsdom

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?

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:

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.

Todos 4 comentários

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.

  1. Você está tentando usar jsdom como um ambiente global, que não é assim que jsdom funciona. Mesmo se você mudasse para commonjs, seu código não funcionaria. Veja esta página wiki , que detalha um pouco o problema e meu comentário sobre um assunto semelhante. Você pode conseguir fazer isso combinar babel e jest.
  2. a importação ainda não foi implementada (no nó). Provavelmente, isso será resolvido de forma um tanto automática quando o nó os implementa para nós, embora possamos ter que implementar um carregador real.

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.

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