Mocking react-beautiful-dnd with Jest

The recommended approach to test components using react-beautiful-dnd hasn't been defined yet. However, this is somewhat blocking me.

I can test my components using react-beautiful-dnd by wrapping them in DragDropContext as per this recommendation:

import React from 'react'

import {render} from 'react-testing-library'

import {DragDropContext} from 'react-beautiful-dnd'



import List from '../List'



describe('List', () => {



  it('renders', () => {

    const title = 'title'

    const {container, getByText} = render(

      <DragDropContext onDragEnd={() => {}}>

        <List>

          <li>{title}</li>

        </List>

      </DragDropContext>

    )

    expect(container.firstChild).toBeInTheDocument()

    expect(getByText(title)).toBeInTheDocument()

  })

})

However, this seems like a sub-optimal approach. Instead, I would like to mock react-beautiful-dnd, but I can't figure out how to do that correctly.

Say, if my List component is wrapped in Droppable like so:

return (

  <Droppable droppableId='id'>

    {provided =>

      <ListContainer 

        ref={provided.innerRef}

        {...provided.droppableProps}

      >

        {children}

        {provided.placeholder}

      </ListContainer>

    }

  </Droppable>

)

how do I write the mock for a component using the render prop approach (which Droppable does)?

jest.mock('react-beautiful-dnd', () => ({

  Droppable: props => props.children()

}))

The above would work for a higher-order component. How do I change it to work for a component implementing the render prop?

asked Nov 22 '18 at 7:51

artooras

1,57111838

I probably misunderstood something, but I don't see why your mock would not work. I think in the hoc you would return props.children from the mock, and with render prop it's props.children()

– Herman Starikov
Nov 22 '18 at 17:07

Hi @HermanStarikov. The thing is, the render prop should be a function that contains a provided argument, as that will then provide props to children. If I run the code as-is, I get an error: Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

– artooras
Nov 30 '18 at 12:08

add a comment |

The recommended approach to test components using react-beautiful-dnd hasn't been defined yet. However, this is somewhat blocking me.

I can test my components using react-beautiful-dnd by wrapping them in DragDropContext as per this recommendation:

import React from 'react'

import {render} from 'react-testing-library'

import {DragDropContext} from 'react-beautiful-dnd'



import List from '../List'



describe('List', () => {



  it('renders', () => {

    const title = 'title'

    const {container, getByText} = render(

      <DragDropContext onDragEnd={() => {}}>

        <List>

          <li>{title}</li>

        </List>

      </DragDropContext>

    )

    expect(container.firstChild).toBeInTheDocument()

    expect(getByText(title)).toBeInTheDocument()

  })

})

However, this seems like a sub-optimal approach. Instead, I would like to mock react-beautiful-dnd, but I can't figure out how to do that correctly.

Say, if my List component is wrapped in Droppable like so:

return (

  <Droppable droppableId='id'>

    {provided =>

      <ListContainer 

        ref={provided.innerRef}

        {...provided.droppableProps}

      >

        {children}

        {provided.placeholder}

      </ListContainer>

    }

  </Droppable>

)

how do I write the mock for a component using the render prop approach (which Droppable does)?

jest.mock('react-beautiful-dnd', () => ({

  Droppable: props => props.children()

}))

The above would work for a higher-order component. How do I change it to work for a component implementing the render prop?

asked Nov 22 '18 at 7:51

artooras

1,57111838

I probably misunderstood something, but I don't see why your mock would not work. I think in the hoc you would return props.children from the mock, and with render prop it's props.children()

– Herman Starikov
Nov 22 '18 at 17:07

Hi @HermanStarikov. The thing is, the render prop should be a function that contains a provided argument, as that will then provide props to children. If I run the code as-is, I get an error: Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

– artooras
Nov 30 '18 at 12:08

add a comment |

The recommended approach to test components using react-beautiful-dnd hasn't been defined yet. However, this is somewhat blocking me.

I can test my components using react-beautiful-dnd by wrapping them in DragDropContext as per this recommendation:

import React from 'react'

import {render} from 'react-testing-library'

import {DragDropContext} from 'react-beautiful-dnd'



import List from '../List'



describe('List', () => {



  it('renders', () => {

    const title = 'title'

    const {container, getByText} = render(

      <DragDropContext onDragEnd={() => {}}>

        <List>

          <li>{title}</li>

        </List>

      </DragDropContext>

    )

    expect(container.firstChild).toBeInTheDocument()

    expect(getByText(title)).toBeInTheDocument()

  })

})

However, this seems like a sub-optimal approach. Instead, I would like to mock react-beautiful-dnd, but I can't figure out how to do that correctly.

Say, if my List component is wrapped in Droppable like so:

return (

  <Droppable droppableId='id'>

    {provided =>

      <ListContainer 

        ref={provided.innerRef}

        {...provided.droppableProps}

      >

        {children}

        {provided.placeholder}

      </ListContainer>

    }

  </Droppable>

)

how do I write the mock for a component using the render prop approach (which Droppable does)?

jest.mock('react-beautiful-dnd', () => ({

  Droppable: props => props.children()

}))

The above would work for a higher-order component. How do I change it to work for a component implementing the render prop?

asked Nov 22 '18 at 7:51

artooras

1,57111838

The recommended approach to test components using react-beautiful-dnd hasn't been defined yet. However, this is somewhat blocking me.

I can test my components using react-beautiful-dnd by wrapping them in DragDropContext as per this recommendation:

import React from 'react'

import {render} from 'react-testing-library'

import {DragDropContext} from 'react-beautiful-dnd'



import List from '../List'



describe('List', () => {



  it('renders', () => {

    const title = 'title'

    const {container, getByText} = render(

      <DragDropContext onDragEnd={() => {}}>

        <List>

          <li>{title}</li>

        </List>

      </DragDropContext>

    )

    expect(container.firstChild).toBeInTheDocument()

    expect(getByText(title)).toBeInTheDocument()

  })

})

However, this seems like a sub-optimal approach. Instead, I would like to mock react-beautiful-dnd, but I can't figure out how to do that correctly.

Say, if my List component is wrapped in Droppable like so:

return (

  <Droppable droppableId='id'>

    {provided =>

      <ListContainer 

        ref={provided.innerRef}

        {...provided.droppableProps}

      >

        {children}

        {provided.placeholder}

      </ListContainer>

    }

  </Droppable>

)

how do I write the mock for a component using the render prop approach (which Droppable does)?

jest.mock('react-beautiful-dnd', () => ({

  Droppable: props => props.children()

}))

The above would work for a higher-order component. How do I change it to work for a component implementing the render prop?

reactjs mocking jestjs react-beautiful-dnd

asked Nov 22 '18 at 7:51

artooras

1,57111838

asked Nov 22 '18 at 7:51

artooras

1,57111838

asked Nov 22 '18 at 7:51

artooras

1,57111838

asked Nov 22 '18 at 7:51

artooras

1,57111838

asked Nov 22 '18 at 7:51

artooras

1,57111838

I probably misunderstood something, but I don't see why your mock would not work. I think in the hoc you would return props.children from the mock, and with render prop it's props.children()

– Herman Starikov
Nov 22 '18 at 17:07

Hi @HermanStarikov. The thing is, the render prop should be a function that contains a provided argument, as that will then provide props to children. If I run the code as-is, I get an error: Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

– artooras
Nov 30 '18 at 12:08

add a comment |

I probably misunderstood something, but I don't see why your mock would not work. I think in the hoc you would return props.children from the mock, and with render prop it's props.children()

– Herman Starikov
Nov 22 '18 at 17:07

Hi @HermanStarikov. The thing is, the render prop should be a function that contains a provided argument, as that will then provide props to children. If I run the code as-is, I get an error: Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

– artooras
Nov 30 '18 at 12:08

I probably misunderstood something, but I don't see why your mock would not work. I think in the hoc you would return props.children from the mock, and with render prop it's props.children()

– Herman Starikov
Nov 22 '18 at 17:07

Hi @HermanStarikov. The thing is, the render prop should be a function that contains a provided argument, as that will then provide props to children. If I run the code as-is, I get an error:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

– artooras
Nov 30 '18 at 12:08

Hi @HermanStarikov. The thing is, the render prop should be a function that contains a provided argument, as that will then provide props to children. If I run the code as-is, I get an error:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

– artooras
Nov 30 '18 at 12:08

add a comment |

0

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53426148%2fmocking-react-beautiful-dnd-with-jest%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

0

active

oldest

votes

0

active

oldest

votes

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Argthtjtr