Enzyme: Returned empty shallowWrapper for every .find()
Current behavior
Exist component list based on custom ui-library components, it renders two cases - empty list and list of users
User list
function PatientList({ role, t, requestGetPatientList, patients: { data: patients = [] } = {} }) {
return (
<PageWrapper>
<Paper data-test="patientListBlock">
<Search placeholder={t('searchPlaceholder')} data-test="searchPatientInput" />
<FlexTableRow heading>
<FlexTableCol basis={250}>{t('patient.patientName')}</FlexTableCol>
<FlexTableCol basis={250}>{t('patient.patientId')}</FlexTableCol>
<FlexTableCol basis={200}>{t('dob')}</FlexTableCol>
<FlexTableCol basis={250}>{t('patient.deviceVendor')}</FlexTableCol>
<FlexTableCol>{t('patient.activationDate')}</FlexTableCol>
</FlexTableRow>
{mapIndex(
(item, index) => (
<PatientListRow key={index} index={index} {...item} />
),
patients,
)}
</Paper>
{patients.length > 0 ? (
<PaginationSection
activePage={1}
onPageChange={() => {}}
textKey="pagination.patients"
total={36}
/>
) : (
<FlexTableRow className={s.noPatientBlock}>No patients</FlexTableRow>
)}
</PageWrapper>
);
}
My tests covered that two cases, where I try use .find() method for shallow wrapper
User list tests
describe('PatientList', () => {
let subject;
let patients
let requestGetPatientList;
let t;
beforeEach(() => {
requestGetPatientList = jest.fn();
t = fn => fn;
patients = { data: [...new Array(10)].map(() => ({})) }
});
const buildSubject = ({...rest}) => {
const props = {
patients,
requestGetPatientList,
t,
...rest
}
return shallow(
<PatientList {...props} />
)
}
it('renders correctly with patients', () => {
subject = buildSubject()
>>>>>>>>>> console.log(subject.find('div'))
expect(subject).toMatchSnapshot();
});
it('renders correctly with empty patients list', () => {
subject = buildSubject({ patients: {} })
expect(subject).toMatchSnapshot();
});
});
Snapshots
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`PatientList renders correctly with empty patients list 1`] = `
ShallowWrapper {
Symbol(enzyme.__root__): [Circular],
Symbol(enzyme.__unrendered__): <PatientList
patients={Object {}}
requestGetPatientList={[MockFunction]}
role="RC"
t={[Function]}
/>,
Symbol(enzyme.__renderer__): Object {
"batchedUpdates": [Function],
"checkPropTypes": [Function],
"getNode": [Function],
"render": [Function],
"simulateError": [Function],
"simulateEvent": [Function],
"unmount": [Function],
},
Symbol(enzyme.__node__): Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"children": Array [
<Unknown />,
<Paper
className={null}
data-test="patientListBlock"
>
<Search
className={null}
data-test="searchPatientInput"
placeholder="searchPlaceholder"
/>
<FlexTableRow
className={null}
component="div"
heading={true}
variant="default"
>
<FlexTableCol
basis={250}
style={Object {}}
>
patient.patientName
</FlexTableCol>
<FlexTableCol
basis={250}
style={Object {}}
>
patient.patientId
</FlexTableCol>
<FlexTableCol
basis={200}
style={Object {}}
>
dob
</FlexTableCol>
<FlexTableCol
basis={250}
style={Object {}}
>
patient.deviceVendor
</FlexTableCol>
<FlexTableCol
style={Object {}}
>
patient.activationDate
</FlexTableCol>
</FlexTableRow>
</Paper>,
<FlexTableRow
className="noPatientBlock"
component="div"
heading={false}
variant="default"
>
No patients
</FlexTableRow>,
],
"tight": false,
},
"ref": null,
"rendered": Array [
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {},
"ref": null,
"rendered": null,
"type": [Function],
},
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"children": Array [
<Search
className={null}
data-test="searchPatientInput"
placeholder="searchPlaceholder"
/>,
<FlexTableRow
className={null}
component="div"
heading={true}
variant="default"
>
<FlexTableCol
basis={250}
style={Object {}}
>
patient.patientName
</FlexTableCol>
<FlexTableCol
basis={250}
style={Object {}}
>
patient.patientId
</FlexTableCol>
<FlexTableCol
basis={200}
style={Object {}}
>
dob
</FlexTableCol>
<FlexTableCol
basis={250}
style={Object {}}
>
patient.deviceVendor
</FlexTableCol>
<FlexTableCol
style={Object {}}
>
patient.activationDate
</FlexTableCol>
</FlexTableRow>,
Array [],
],
"className": null,
"data-test": "patientListBlock",
},
"ref": null,
"rendered": Array [
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"className": null,
"data-test": "searchPatientInput",
"placeholder": "searchPlaceholder",
},
"ref": null,
"rendered": null,
"type": [Function],
},
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"children": Array [
<FlexTableCol
basis={250}
style={Object {}}
>
patient.patientName
</FlexTableCol>,
<FlexTableCol
basis={250}
style={Object {}}
>
patient.patientId
</FlexTableCol>,
<FlexTableCol
basis={200}
style={Object {}}
>
dob
</FlexTableCol>,
<FlexTableCol
basis={250}
style={Object {}}
>
patient.deviceVendor
</FlexTableCol>,
<FlexTableCol
style={Object {}}
>
patient.activationDate
</FlexTableCol>,
],
"className": null,
"component": "div",
"heading": true,
"variant": "default",
},
"ref": null,
"rendered": Array [
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"basis": 250,
"children": "patient.patientName",
"className": undefined,
"style": Object {},
},
"ref": null,
"rendered": "patient.patientName",
"type": [Function],
},
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"basis": 250,
"children": "patient.patientId",
"className": undefined,
"style": Object {},
},
"ref": null,
"rendered": "patient.patientId",
"type": [Function],
},
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"basis": 200,
"children": "dob",
"className": undefined,
"style": Object {},
},
"ref": null,
"rendered": "dob",
"type": [Function],
},
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"basis": 250,
"children": "patient.deviceVendor",
"className": undefined,
"style": Object {},
},
"ref": null,
"rendered": "patient.deviceVendor",
"type": [Function],
},
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"basis": undefined,
"children": "patient.activationDate",
"className": undefined,
"style": Object {},
},
"ref": null,
"rendered": "patient.activationDate",
"type": [Function],
},
],
"type": [Function],
},
],
"type": [Function],
},
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"children": "No patients",
"className": "noPatientBlock",
"component": "div",
"heading": false,
"variant": "default",
},
"ref": null,
"rendered": "No patients",
"type": [Function],
},
],
"type": [Function],
},
Symbol(enzyme.__nodes__): Array [
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"children": Array [
<Unknown />,
<Paper
className={null}
data-test="patientListBlock"
>
<Search
className={null}
data-test="searchPatientInput"
placeholder="searchPlaceholder"
/>
<FlexTableRow
className={null}
component="div"
heading={true}
variant="default"
>
<FlexTableCol
basis={250}
style={Object {}}
>
patient.patientName
</FlexTableCol>
<FlexTableCol
basis={250}
style={Object {}}
>
patient.patientId
</FlexTableCol>
<FlexTableCol
basis={200}
style={Object {}}
>
dob
</FlexTableCol>
<FlexTableCol
basis={250}
style={Object {}}
>
patient.deviceVendor
</FlexTableCol>
<FlexTableCol
style={Object {}}
>
patient.activationDate
</FlexTableCol>
</FlexTableRow>
</Paper>,
<FlexTableRow
className="noPatientBlock"
component="div"
heading={false}
variant="default"
>
No patients
</FlexTableRow>,
],
"tight": false,
},
"ref": null,
"rendered": Array [
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {},
"ref": null,
"rendered": null,
"type": [Function],
},
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"children": Array [
<Search
className={null}
data-test="searchPatientInput"
placeholder="searchPlaceholder"
/>,
<FlexTableRow
className={null}
component="div"
heading={true}
variant="default"
>
<FlexTableCol
basis={250}
style={Object {}}
>
patient.patientName
</FlexTableCol>
<FlexTableCol
basis={250}
style={Object {}}
>
patient.patientId
</FlexTableCol>
<FlexTableCol
basis={200}
style={Object {}}
>
dob
</FlexTableCol>
<FlexTableCol
basis={250}
style={Object {}}
>
patient.deviceVendor
</FlexTableCol>
<FlexTableCol
style={Object {}}
>
patient.activationDate
</FlexTableCol>
</FlexTableRow>,
Array [],
],
"className": null,
"data-test": "patientListBlock",
},
"ref": null,
"rendered": Array [
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"className": null,
"data-test": "searchPatientInput",
"placeholder": "searchPlaceholder",
},
"ref": null,
"rendered": null,
"type": [Function],
},
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"children": Array [
<FlexTableCol
basis={250}
style={Object {}}
>
patient.patientName
</FlexTableCol>,
<FlexTableCol
basis={250}
style={Object {}}
>
patient.patientId
</FlexTableCol>,
<FlexTableCol
basis={200}
style={Object {}}
>
dob
</FlexTableCol>,
<FlexTableCol
basis={250}
style={Object {}}
>
patient.deviceVendor
</FlexTableCol>,
<FlexTableCol
style={Object {}}
>
patient.activationDate
</FlexTableCol>,
],
"className": null,
"component": "div",
"heading": true,
"variant": "default",
},
"ref": null,
"rendered": Array [
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"basis": 250,
"children": "patient.patientName",
"className": undefined,
"style": Object {},
},
"ref": null,
"rendered": "patient.patientName",
"type": [Function],
},
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"basis": 250,
"children": "patient.patientId",
"className": undefined,
"style": Object {},
},
"ref": null,
"rendered": "patient.patientId",
"type": [Function],
},
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"basis": 200,
"children": "dob",
"className": undefined,
"style": Object {},
},
"ref": null,
"rendered": "dob",
"type": [Function],
},
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"basis": 250,
"children": "patient.deviceVendor",
"className": undefined,
"style": Object {},
},
"ref": null,
"rendered": "patient.deviceVendor",
"type": [Function],
},
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"basis": undefined,
"children": "patient.activationDate",
"className": undefined,
"style": Object {},
},
"ref": null,
"rendered": "patient.activationDate",
"type": [Function],
},
],
"type": [Function],
},
],
"type": [Function],
},
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"children": "No patients",
"className": "noPatientBlock",
"component": "div",
"heading": false,
"variant": "default",
},
"ref": null,
"rendered": "No patients",
"type": [Function],
},
],
"type": [Function],
},
],
Symbol(enzyme.__options__): Object {
"adapter": ReactSixteenAdapter {
"options": Object {
"enableComponentDidUpdateOnSetState": true,
"legacyContextMode": "parent",
"lifecycles": Object {
"componentDidUpdate": Object {
"onSetState": true,
},
"getChildContext": Object {
"calledByRenderer": false,
},
"getDerivedStateFromProps": Object {
"hasShouldComponentUpdateBug": false,
},
"getSnapshotBeforeUpdate": true,
"setState": Object {
"skipsComponentDidUpdateOnNullish": true,
},
},
},
},
},
}
`;
exports[`PatientList renders correctly with patients 1`] = `
ShallowWrapper {
Symbol(enzyme.__root__): [Circular],
Symbol(enzyme.__unrendered__): <PatientList
patients={
Object {
"data": Array [
Object {},
Object {},
Object {},
Object {},
Object {},
Object {},
Object {},
Object {},
Object {},
Object {},
],
}
}
requestGetPatientList={[MockFunction]}
role="RC"
t={[Function]}
/>,
Symbol(enzyme.__renderer__): Object {
"batchedUpdates": [Function],
"checkPropTypes": [Function],
"getNode": [Function],
"render": [Function],
"simulateError": [Function],
"simulateEvent": [Function],
"unmount": [Function],
},
Symbol(enzyme.__node__): Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"children": Array [
<Unknown />,
<Paper
className={null}
data-test="patientListBlock"
>
<Search
className={null}
data-test="searchPatientInput"
placeholder="searchPlaceholder"
/>
<FlexTableRow
className={null}
component="div"
heading={true}
variant="default"
>
<FlexTableCol
basis={250}
style={Object {}}
>
patient.patientName
</FlexTableCol>
<FlexTableCol
basis={250}
style={Object {}}
>
patient.patientId
</FlexTableCol>
<FlexTableCol
basis={200}
style={Object {}}
>
dob
</FlexTableCol>
<FlexTableCol
basis={250}
style={Object {}}
>
patient.deviceVendor
</FlexTableCol>
<FlexTableCol
style={Object {}}
>
patient.activationDate
</FlexTableCol>
</FlexTableRow>
<PatientListRow
index={0}
/>
<PatientListRow
index={1}
/>
<PatientListRow
index={2}
/>
<PatientListRow
index={3}
/>
<PatientListRow
index={4}
/>
<PatientListRow
index={5}
/>
<PatientListRow
index={6}
/>
<PatientListRow
index={7}
/>
<PatientListRow
index={8}
/>
<PatientListRow
index={9}
/>
</Paper>,
<Unknown
activePage={1}
onPageChange={[Function]}
textKey="pagination.patients"
total={36}
/>,
],
"tight": false,
},
"ref": null,
"rendered": Array [
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {},
"ref": null,
"rendered": null,
"type": [Function],
},
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"children": Array [
<Search
className={null}
data-test="searchPatientInput"
placeholder="searchPlaceholder"
/>,
<FlexTableRow
className={null}
component="div"
heading={true}
variant="default"
>
<FlexTableCol
basis={250}
style={Object {}}
>
patient.patientName
</FlexTableCol>
<FlexTableCol
basis={250}
style={Object {}}
>
patient.patientId
</FlexTableCol>
<FlexTableCol
basis={200}
style={Object {}}
>
dob
</FlexTableCol>
<FlexTableCol
basis={250}
style={Object {}}
>
patient.deviceVendor
</FlexTableCol>
<FlexTableCol
style={Object {}}
>
patient.activationDate
</FlexTableCol>
</FlexTableRow>,
Array [
<PatientListRow
index={0}
/>,
<PatientListRow
index={1}
/>,
<PatientListRow
index={2}
/>,
<PatientListRow
index={3}
/>,
<PatientListRow
index={4}
/>,
<PatientListRow
index={5}
/>,
<PatientListRow
index={6}
/>,
<PatientListRow
index={7}
/>,
<PatientListRow
index={8}
/>,
<PatientListRow
index={9}
/>,
],
],
"className": null,
"data-test": "patientListBlock",
},
"ref": null,
"rendered": Array [
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"className": null,
"data-test": "searchPatientInput",
"placeholder": "searchPlaceholder",
},
"ref": null,
"rendered": null,
"type": [Function],
},
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"children": Array [
<FlexTableCol
basis={250}
style={Object {}}
>
patient.patientName
</FlexTableCol>,
<FlexTableCol
basis={250}
style={Object {}}
>
patient.patientId
</FlexTableCol>,
<FlexTableCol
basis={200}
style={Object {}}
>
dob
</FlexTableCol>,
<FlexTableCol
basis={250}
style={Object {}}
>
patient.deviceVendor
</FlexTableCol>,
<FlexTableCol
style={Object {}}
>
patient.activationDate
</FlexTableCol>,
],
"className": null,
"component": "div",
"heading": true,
"variant": "default",
},
"ref": null,
"rendered": Array [
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"basis": 250,
"children": "patient.patientName",
"className": undefined,
"style": Object {},
},
"ref": null,
"rendered": "patient.patientName",
"type": [Function],
},
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"basis": 250,
"children": "patient.patientId",
"className": undefined,
"style": Object {},
},
"ref": null,
"rendered": "patient.patientId",
"type": [Function],
},
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"basis": 200,
"children": "dob",
"className": undefined,
"style": Object {},
},
"ref": null,
"rendered": "dob",
"type": [Function],
},
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"basis": 250,
"children": "patient.deviceVendor",
"className": undefined,
"style": Object {},
},
"ref": null,
"rendered": "patient.deviceVendor",
"type": [Function],
},
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"basis": undefined,
"children": "patient.activationDate",
"className": undefined,
"style": Object {},
},
"ref": null,
"rendered": "patient.activationDate",
"type": [Function],
},
],
"type": [Function],
},
Object {
"instance": null,
"key": "0",
"nodeType": "function",
"props": Object {
"index": 0,
},
"ref": null,
"rendered": null,
"type": [Function],
},
Object {
"instance": null,
"key": "1",
"nodeType": "function",
"props": Object {
"index": 1,
},
"ref": null,
"rendered": null,
"type": [Function],
},
Object {
"instance": null,
"key": "2",
"nodeType": "function",
"props": Object {
"index": 2,
},
"ref": null,
"rendered": null,
"type": [Function],
},
Object {
"instance": null,
"key": "3",
"nodeType": "function",
"props": Object {
"index": 3,
},
"ref": null,
"rendered": null,
"type": [Function],
},
Object {
"instance": null,
"key": "4",
"nodeType": "function",
"props": Object {
"index": 4,
},
"ref": null,
"rendered": null,
"type": [Function],
},
Object {
"instance": null,
"key": "5",
"nodeType": "function",
"props": Object {
"index": 5,
},
"ref": null,
"rendered": null,
"type": [Function],
},
Object {
"instance": null,
"key": "6",
"nodeType": "function",
"props": Object {
"index": 6,
},
"ref": null,
"rendered": null,
"type": [Function],
},
Object {
"instance": null,
"key": "7",
"nodeType": "function",
"props": Object {
"index": 7,
},
"ref": null,
"rendered": null,
"type": [Function],
},
Object {
"instance": null,
"key": "8",
"nodeType": "function",
"props": Object {
"index": 8,
},
"ref": null,
"rendered": null,
"type": [Function],
},
Object {
"instance": null,
"key": "9",
"nodeType": "function",
"props": Object {
"index": 9,
},
"ref": null,
"rendered": null,
"type": [Function],
},
],
"type": [Function],
},
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"activePage": 1,
"onPageChange": [Function],
"textKey": "pagination.patients",
"total": 36,
},
"ref": null,
"rendered": null,
"type": [Function],
},
],
"type": [Function],
},
Symbol(enzyme.__nodes__): Array [
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"children": Array [
<Unknown />,
<Paper
className={null}
data-test="patientListBlock"
>
<Search
className={null}
data-test="searchPatientInput"
placeholder="searchPlaceholder"
/>
<FlexTableRow
className={null}
component="div"
heading={true}
variant="default"
>
<FlexTableCol
basis={250}
style={Object {}}
>
patient.patientName
</FlexTableCol>
<FlexTableCol
basis={250}
style={Object {}}
>
patient.patientId
</FlexTableCol>
<FlexTableCol
basis={200}
style={Object {}}
>
dob
</FlexTableCol>
<FlexTableCol
basis={250}
style={Object {}}
>
patient.deviceVendor
</FlexTableCol>
<FlexTableCol
style={Object {}}
>
patient.activationDate
</FlexTableCol>
</FlexTableRow>
<PatientListRow
index={0}
/>
<PatientListRow
index={1}
/>
<PatientListRow
index={2}
/>
<PatientListRow
index={3}
/>
<PatientListRow
index={4}
/>
<PatientListRow
index={5}
/>
<PatientListRow
index={6}
/>
<PatientListRow
index={7}
/>
<PatientListRow
index={8}
/>
<PatientListRow
index={9}
/>
</Paper>,
<Unknown
activePage={1}
onPageChange={[Function]}
textKey="pagination.patients"
total={36}
/>,
],
"tight": false,
},
"ref": null,
"rendered": Array [
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {},
"ref": null,
"rendered": null,
"type": [Function],
},
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"children": Array [
<Search
className={null}
data-test="searchPatientInput"
placeholder="searchPlaceholder"
/>,
<FlexTableRow
className={null}
component="div"
heading={true}
variant="default"
>
<FlexTableCol
basis={250}
style={Object {}}
>
patient.patientName
</FlexTableCol>
<FlexTableCol
basis={250}
style={Object {}}
>
patient.patientId
</FlexTableCol>
<FlexTableCol
basis={200}
style={Object {}}
>
dob
</FlexTableCol>
<FlexTableCol
basis={250}
style={Object {}}
>
patient.deviceVendor
</FlexTableCol>
<FlexTableCol
style={Object {}}
>
patient.activationDate
</FlexTableCol>
</FlexTableRow>,
Array [
<PatientListRow
index={0}
/>,
<PatientListRow
index={1}
/>,
<PatientListRow
index={2}
/>,
<PatientListRow
index={3}
/>,
<PatientListRow
index={4}
/>,
<PatientListRow
index={5}
/>,
<PatientListRow
index={6}
/>,
<PatientListRow
index={7}
/>,
<PatientListRow
index={8}
/>,
<PatientListRow
index={9}
/>,
],
],
"className": null,
"data-test": "patientListBlock",
},
"ref": null,
"rendered": Array [
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"className": null,
"data-test": "searchPatientInput",
"placeholder": "searchPlaceholder",
},
"ref": null,
"rendered": null,
"type": [Function],
},
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"children": Array [
<FlexTableCol
basis={250}
style={Object {}}
>
patient.patientName
</FlexTableCol>,
<FlexTableCol
basis={250}
style={Object {}}
>
patient.patientId
</FlexTableCol>,
<FlexTableCol
basis={200}
style={Object {}}
>
dob
</FlexTableCol>,
<FlexTableCol
basis={250}
style={Object {}}
>
patient.deviceVendor
</FlexTableCol>,
<FlexTableCol
style={Object {}}
>
patient.activationDate
</FlexTableCol>,
],
"className": null,
"component": "div",
"heading": true,
"variant": "default",
},
"ref": null,
"rendered": Array [
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"basis": 250,
"children": "patient.patientName",
"className": undefined,
"style": Object {},
},
"ref": null,
"rendered": "patient.patientName",
"type": [Function],
},
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"basis": 250,
"children": "patient.patientId",
"className": undefined,
"style": Object {},
},
"ref": null,
"rendered": "patient.patientId",
"type": [Function],
},
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"basis": 200,
"children": "dob",
"className": undefined,
"style": Object {},
},
"ref": null,
"rendered": "dob",
"type": [Function],
},
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"basis": 250,
"children": "patient.deviceVendor",
"className": undefined,
"style": Object {},
},
"ref": null,
"rendered": "patient.deviceVendor",
"type": [Function],
},
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"basis": undefined,
"children": "patient.activationDate",
"className": undefined,
"style": Object {},
},
"ref": null,
"rendered": "patient.activationDate",
"type": [Function],
},
],
"type": [Function],
},
Object {
"instance": null,
"key": "0",
"nodeType": "function",
"props": Object {
"index": 0,
},
"ref": null,
"rendered": null,
"type": [Function],
},
Object {
"instance": null,
"key": "1",
"nodeType": "function",
"props": Object {
"index": 1,
},
"ref": null,
"rendered": null,
"type": [Function],
},
Object {
"instance": null,
"key": "2",
"nodeType": "function",
"props": Object {
"index": 2,
},
"ref": null,
"rendered": null,
"type": [Function],
},
Object {
"instance": null,
"key": "3",
"nodeType": "function",
"props": Object {
"index": 3,
},
"ref": null,
"rendered": null,
"type": [Function],
},
Object {
"instance": null,
"key": "4",
"nodeType": "function",
"props": Object {
"index": 4,
},
"ref": null,
"rendered": null,
"type": [Function],
},
Object {
"instance": null,
"key": "5",
"nodeType": "function",
"props": Object {
"index": 5,
},
"ref": null,
"rendered": null,
"type": [Function],
},
Object {
"instance": null,
"key": "6",
"nodeType": "function",
"props": Object {
"index": 6,
},
"ref": null,
"rendered": null,
"type": [Function],
},
Object {
"instance": null,
"key": "7",
"nodeType": "function",
"props": Object {
"index": 7,
},
"ref": null,
"rendered": null,
"type": [Function],
},
Object {
"instance": null,
"key": "8",
"nodeType": "function",
"props": Object {
"index": 8,
},
"ref": null,
"rendered": null,
"type": [Function],
},
Object {
"instance": null,
"key": "9",
"nodeType": "function",
"props": Object {
"index": 9,
},
"ref": null,
"rendered": null,
"type": [Function],
},
],
"type": [Function],
},
Object {
"instance": null,
"key": undefined,
"nodeType": "function",
"props": Object {
"activePage": 1,
"onPageChange": [Function],
"textKey": "pagination.patients",
"total": 36,
},
"ref": null,
"rendered": null,
"type": [Function],
},
],
"type": [Function],
},
],
Symbol(enzyme.__options__): Object {
"adapter": ReactSixteenAdapter {
"options": Object {
"enableComponentDidUpdateOnSetState": true,
"legacyContextMode": "parent",
"lifecycles": Object {
"componentDidUpdate": Object {
"onSetState": true,
},
"getChildContext": Object {
"calledByRenderer": false,
},
"getDerivedStateFromProps": Object {
"hasShouldComponentUpdateBug": false,
},
"getSnapshotBeforeUpdate": true,
"setState": Object {
"skipsComponentDidUpdateOnNullish": true,
},
},
},
},
},
}
`;
Try use .find() with another options (tag, class, comstructor), but every time return ShallowWrapper {}
Expected behavior
Return node list
Your environment
API
- [X] shallow
- [ ] mount
- [ ] render
Version
| library | version
| ------------------- | -------
| enzyme | "^3.9.0"
| react | "^16.8.1"
| react-dom | "^16.8.1"
| react-test-renderer | -
| adapter (below) |
Adapter
- [X] enzyme-adapter-react-16
- [ ] enzyme-adapter-react-16.3
- [ ] enzyme-adapter-react-16.2
- [ ] enzyme-adapter-react-16.1
- [ ] enzyme-adapter-react-15
- [ ] enzyme-adapter-react-15.4
- [ ] enzyme-adapter-react-14
- [ ] enzyme-adapter-react-13
- [ ] enzyme-adapter-react-helper
- [ ] others ( )
question
ravecat
👍2
All 6 comments
That's not an empty shallow wrapper - that's just how it's logged. Try calling .debug() on it, or .length?
ljharb
on 3 Apr 2019
👍24
(as for snapshots; enzyme does not support or encourage snapshot testing - .debug() is the closest analog)
ljharb
on 3 Apr 2019
@ljharb thank you for quick answer!
That's not an empty shallow wrapper - that's just how it's logged. Try calling
.debug()on it, or.length?
console.log(subject.find('div').debug())
console.log src/components/PatientList/__test__/index.test.js:34
console.log(subject.find('div').length)
console.log src/components/PatientList/__test__/index.test.js:35
0
ravecat
on 4 Apr 2019
(as for snapshots; enzyme does not support or encourage snapshot testing -
.debug()is the closest analog)
Thank you for clarification, but I can not use others operations (example simulate click) because of mentioned the above, I haven't available node
For example result of console.log(subject.debug())
console.log src/components/PatientList/__test__/index.test.js:36 <PageWrapper tight={false}> <Component /> <Paper data-test="patientListBlock" className={{...}}> <Search placeholder="searchPlaceholder" data-test="searchPatientInput" className={{...}} /> <FlexTableRow heading={true} className={{...}} component="div" variant="default"> <FlexTableCol basis={250} className={[undefined]} style={{...}}> patient.patientName </FlexTableCol> <FlexTableCol basis={250} className={[undefined]} style={{...}}> patient.patientId </FlexTableCol> <FlexTableCol basis={200} className={[undefined]} style={{...}}> dob </FlexTableCol> <FlexTableCol basis={250} className={[undefined]} style={{...}}> patient.deviceVendor </FlexTableCol> <FlexTableCol basis={[undefined]} className={[undefined]} style={{...}}> patient.activationDate </FlexTableCol> </FlexTableRow> <PatientListRow index={0} /> <PatientListRow index={1} /> <PatientListRow index={2} /> <PatientListRow index={3} /> <PatientListRow index={4} /> <PatientListRow index={5} /> <PatientListRow index={6} /> <PatientListRow index={7} /> <PatientListRow index={8} /> <PatientListRow index={9} /> </Paper> <Component activePage={1} onPageChange={[Function: onPageChange]} textKey="pagination.patients" total={36} /> </PageWrapper>
ravecat
on 4 Apr 2019
👍1
You'll note there's no divs in there. The shallow renderer only renders the top level. Since you have no divs, you can't find any.
Your tests should be making assertions on PatientListRows, FlexTableCols/Rows, etc - and delegate the testing responsibility for "what PatientListRow etc renders" to those components' shallow tests.
ljharb
on 4 Apr 2019
Your tests should be making assertions on PatientListRows, FlexTableCols/Rows, etc - and delegate the testing responsibility for "what PatientListRow etc renders" to _those_ components' shallow tests.
Thank you for detailed explanation! I got it, solved my problem
ravecat
on 6 Apr 2019
❤2
Was this page helpful?
0 / 5 - 0 ratings
Related issues
ivanbtrujillo
路
3Comments
ahuth
路
3Comments
dschinkel
路
3Comments
AdamYahid
路
3Comments
heikkimu
路
3Comments
Most helpful comment
That's not an empty shallow wrapper - that's just how it's logged. Try calling
.debug()on it, or.length?