Using jest.mock() for my components is returning unexpected results in the children of the mocked component. This issue seems to only occur on my machine and it is working on the other machines running the exact same code.
I am creating and rendering a component called ProjectSummary that is a div containing another component called SummaryTemplate that takes a title as a prop and custom components as children.
The problem happens when I am mocking the ProjectSummary component so that when it is rendered the children would be "{}", but instead I am getting back the children as this array:
Error: expect(jest.fn()).toHaveBeenCalledWith(...expected)
- Expected
+ Received
- ObjectContaining {"children": {}, "title": "Project details"},
+ {"children": [<mockConstructor title="Technical PM">Principal Program Technician Mrs. Everett D'Amore DVM</mockConstructor>, <mockConstructor title="Start Date"><mockConstructor format="DD MMM YYYY" value="2020-03-28" /></mockConstructor>, <mockConstructor title="End Date"><mockConstructor format="DD MMM YYYY" value="2021-06-26" /></mockConstructor>, <mockConstructor title="Status">-----</mockConstructor>, <mockConstructor title="Time Left"><mockConstructor endDate="2021-06-26" startDate="2020-03-28" /></mockConstructor>], "title": "Project details"},
{},
Number of calls: 1
This is the test that is failing
jest.mock("./summary", () => ({
__esModule: true,
default: jest.fn().mockImplementation(({ children }) => children)
}))
jest.mock("./key-value-pair", () => ({
__esModule: true,
default: jest.fn().mockImplementation(({ children }) => children)
}))
it("renders visual components", () => {
const projectStartDate = faker.date.past()
const projectEndDate = faker.date.future()
const project = {
responsible_tpm: `${faker.name.title()} ${faker.name.prefix()} ${faker.name.firstName()} ${faker.name.lastName()} ${faker.name.suffix()}`,
start_date: moment(projectStartDate).format("YYYY-MM-DD"),
end_date: moment(projectEndDate).format("YYYY-MM-DD"),
}
render(<ProjectSummary project={project}/>)
toHaveComponentCalledWith(SummaryTemplate, {
title: "Project details",
children: {}
})
})
ProjectSummary component:
const ProjectSummary = ({ project }) => {
return <div className="project-summary">
<SummaryTemplate title="Project details">
<KeyValuePair title="Start Date">
<FormattedDate format="DD MMM YYYY" value={project.start_date} />
</KeyValuePair>
</SummaryTemplate>
</div>
}
Summary Template:
const SummaryTemplate = ({ title, children }) => {
return (<>
<div className="summary">
<div className="content content--no-elevate">
<h6>{title}</h6>
<div className="container flex flex--equal-size">
{children}
</div>
</div>
</div>
</>
)
}