React-dnd: ВСстированиС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Enzyme, Π° Π½Π΅ React TestUtils

Π‘ΠΎΠ·Π΄Π°Π½Π½Ρ‹ΠΉ Π½Π° 26 нояб. 2017  Β·  3ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ  Β·  Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: react-dnd/react-dnd

Π― ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°ΡŽ ΠΏΠΈΡΠ°Ρ‚ΡŒ тСсты, слСдуя этой Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ, Π° Ρ‚Π°ΠΊΠΆΠ΅ этой ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ΅ https://github.com/react-dnd/react-dnd/issues/453

Π£ мСня ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° с тСстовым Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³ΠΎΠΌ.

Π― ΠΌΠΎΠ³Ρƒ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ, Π·Π°ΠΊΠ»ΡŽΡ‡ΠΈΠ² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Π² DragDropContext ΠΈ ΠΎΡ‚Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ² Π΅Π³ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ TestUtils.renderIntoDocument .

Π­Ρ‚ΠΎ Π²Π΅Ρ€Π½Π΅Ρ‚ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ DragDropContextContainer .

Однако, Ссли я ΠΏΠΎΠΏΡ‹Ρ‚Π°ΡŽΡΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠ΅Ρ‚ΠΎΠ΄ Enyzme mount для Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°, ΠΎΠ½ Π²Π΅Ρ€Π½Π΅Ρ‚ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ $$typeof: Symbol(react.element) Ρ‡Ρ‚ΠΎ Π½Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ ΠΌΠ½Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ диспСтчСр.

Π― Π±Ρ‹ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Π΅Π» ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Enzyme - это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ я ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ для своих тСстов Π² Π΄Ρ€ΡƒΠ³ΠΎΠΌ мСстС.

Π£ ΠΊΠΎΠ³ΠΎ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ Π΅ΡΡ‚ΡŒ ΠΏΠΎΠΌΠΎΡ‰ΡŒ с этим?

Π‘Π°ΠΌΡ‹ΠΉ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Попался Π² эту ΠΆΠ΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ. Π― ΠΌΠΎΠ³ Π±Ρ‹ ΠΈ оТидаю, Ρ‡Ρ‚ΠΎ Π²Ρ‹ смоТСтС это ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΌΠ΅Ρ‚ΠΎΠ΄ wrapper.instance() . Π’Π°ΠΊΠΆΠ΅ здСсь описано https://github.com/react-dnd/react-dnd/issues/488.

Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€

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

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΌΠ½Π΅ Ρ‚Π°ΠΊΠΆΠ΅ Π½ΡƒΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ экзСмпляры Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΡ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Π²Ρ‹Π·Ρ‹Π²Π°Ρ‚ΡŒ getHandlerId() .

Если это ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚, Π²ΠΎΡ‚ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΌΠΎΠΈΡ… тСстовых Ρ„Π°ΠΉΠ»ΠΎΠ²: https://gist.github.com/gilleswittenberg/142fe49e1115b5a1936562b2284e1ab7

ВсС 3 ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π£ мСня это Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡Ρ‚ΠΎ Π·Π°Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΎ, Π²ΠΎΡ‚ ΠΊΠ°ΠΊ это выглядит. Π² машинописном тСкстС.

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();
    });
})

Попался Π² эту ΠΆΠ΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ. Π― ΠΌΠΎΠ³ Π±Ρ‹ ΠΈ оТидаю, Ρ‡Ρ‚ΠΎ Π²Ρ‹ смоТСтС это ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΌΠ΅Ρ‚ΠΎΠ΄ wrapper.instance() . Π’Π°ΠΊΠΆΠ΅ здСсь описано https://github.com/react-dnd/react-dnd/issues/488.

Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€

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

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΌΠ½Π΅ Ρ‚Π°ΠΊΠΆΠ΅ Π½ΡƒΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ экзСмпляры Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΡ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Π²Ρ‹Π·Ρ‹Π²Π°Ρ‚ΡŒ getHandlerId() .

Если это ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚, Π²ΠΎΡ‚ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΌΠΎΠΈΡ… тСстовых Ρ„Π°ΠΉΠ»ΠΎΠ²: https://gist.github.com/gilleswittenberg/142fe49e1115b5a1936562b2284e1ab7

Π­Ρ‚Π° ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Π±Ρ‹Π»Π° автоматичСски ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Π° ΠΊΠ°ΠΊ ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠ°Ρ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π² послСднСС врСмя Π½Π΅ Π±Ρ‹Π»ΠΎ активности. Он Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°ΠΊΡ€Ρ‹Ρ‚, Ссли большС Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ активности. Бпасибо Π·Π° ваш Π²ΠΊΠ»Π°Π΄.

Π‘Ρ‹Π»Π° Π»ΠΈ эта страница ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ?
0 / 5 - 0 Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ΠΈ