React-dnd: Testando com Enzima em vez de Reagir TestUtils

Criado em 26 nov. 2017 · 3Comentários · Fonte: react-dnd/react-dnd

Estou escrevendo alguns testes, seguindo esta documentação e também este problema https://github.com/react-dnd/react-dnd/issues/453

O problema que tenho é em relação à renderização do teste.

Posso pegar o exemplo que a documentação dá funcionando, envolvendo o componente em um DragDropContext e renderizando-o com TestUtils.renderIntoDocument .

Isso retornará um objeto DragDropContextContainer .

No entanto, se eu tentar usar o método Enyzme mount para renderizar o objeto, ele retornará um objeto $$typeof: Symbol(react.element) - o que não me deixará obter o gerenciador.

Eu preferiria usar o Enzyme - já que é o que estou usando para meus testes em outros lugares.

Alguém conseguiu ajuda com isso?

wontfix

Fonte

dwjohnston

Comentários muito úteis

Encontrei este mesmo problema. Eu poderia, e espero que você consiga, consertá-lo usando o método wrapper.instance() . Também descrito aqui https://github.com/react-dnd/react-dnd/issues/488.

por exemplo

const Context = wrapInTestContext(Component)
const wrapper = mount(<Context />)
const manager = wrapper.instance().getManager()
const backend = manager.getBackend()

Além disso, eu também precisava fazer com que as instâncias dos componentes filhos chamassem getHandlerId() .

Se ajudar, aqui está um dos meus arquivos de teste: https://gist.github.com/gilleswittenberg/142fe49e1115b5a1936562b2284e1ab7

gilleswittenberg em 29 dez. 2017

👍4

Todos 3 comentários

Acabei de fazer isso funcionar, aqui está o que parece. no texto datilografado.

import { ThingIAmTesting } from '../file/where/it/lives';
describe('It is a test!', () => {
  let props;
  let component;
  const getComponent = () => {
    let OriginalComponent = (ThingIAmTesting as any).DecoratedComponent;
    let identity = el => el;
    if (!component) {
      component = Enzyme.shallow(
        <OriginalComponent {...props} connectDragSource={identity} />
       );
      return component
    }

    beforeEach (() => {
      props = {
         prop: 'stuff',
         }
      component = undefined;
     })
    it('should render', () => {
      let component = getComponent();
      expect(component).toMatchSnapshot();
    });
})

FreeMasen em 13 dez. 2017

Encontrei este mesmo problema. Eu poderia, e espero que você consiga, consertá-lo usando o método wrapper.instance() . Também descrito aqui https://github.com/react-dnd/react-dnd/issues/488.

por exemplo

const Context = wrapInTestContext(Component)
const wrapper = mount(<Context />)
const manager = wrapper.instance().getManager()
const backend = manager.getBackend()

Além disso, eu também precisava fazer com que as instâncias dos componentes filhos chamassem getHandlerId() .

Se ajudar, aqui está um dos meus arquivos de teste: https://gist.github.com/gilleswittenberg/142fe49e1115b5a1936562b2284e1ab7

gilleswittenberg em 29 dez. 2017

👍4

Este problema foi marcado automaticamente como obsoleto porque não teve atividades recentes. Ele será fechado se nenhuma outra atividade ocorrer. Obrigado por suas contribuições.