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?
reactjs mocking jestjs react-beautiful-dnd
asked Nov 22 '18 at 7:51
artoorasartooras
1,57111838
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?
reactjs mocking jestjs react-beautiful-dnd
asked Nov 22 '18 at 7:51
artoorasartooras
1,57111838
I probably misunderstood something, but I don't see why your mock would not work. I think in thehocyou would returnprops.childrenfrom the mock, and withrender propit'sprops.children()
– Herman Starikov
Nov 22 '18 at 17:07
Hi @HermanStarikov. The thing is, the render prop should be a function that contains aprovidedargument, as that will then provide props tochildren. 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?
reactjs mocking jestjs react-beautiful-dnd
asked Nov 22 '18 at 7:51
artoorasartooras
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
reactjs mocking jestjs react-beautiful-dnd
asked Nov 22 '18 at 7:51
artoorasartooras
1,57111838
asked Nov 22 '18 at 7:51
artoorasartooras
1,57111838
asked Nov 22 '18 at 7:51
artoorasartooras
1,57111838
asked Nov 22 '18 at 7:51
artoorasartooras
1,57111838
asked Nov 22 '18 at 7:51
artoorasartooras
1,57111838
1,57111838
I probably misunderstood something, but I don't see why your mock would not work. I think in thehocyou would returnprops.childrenfrom the mock, and withrender propit'sprops.children()
– Herman Starikov
Nov 22 '18 at 17:07
Hi @HermanStarikov. The thing is, the render prop should be a function that contains aprovidedargument, as that will then provide props tochildren. 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 thehocyou would returnprops.childrenfrom the mock, and withrender propit'sprops.children()
– Herman Starikov
Nov 22 '18 at 17:07
Hi @HermanStarikov. The thing is, the render prop should be a function that contains aprovidedargument, as that will then provide props tochildren. 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
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I probably misunderstood something, but I don't see why your mock would not work. I think in the
hocyou would returnprops.childrenfrom the mock, and withrender propit'sprops.children()– Herman Starikov
Nov 22 '18 at 17:07
Hi @HermanStarikov. The thing is, the render prop should be a function that contains a
providedargument, as that will then provide props tochildren. 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