I noticed that the snapshot looks like this:
exports[`shallow 1`] = `
<div>
<Component />
<Component />
</div>
`;
Where means when doing snapshot the two components below are identical:
export const Page1 = () => {
return <div>
<Title/>
<Content/>
</div>
}
export const Page2 = () => {
return <div>
<Content/>
<Title/>
</div>
}
Where Title and Content are:
export const Title = ()=>{
return <h1>Hello World</h1>
}
export const Content= () =>{
return <p>The quick fox jumped over the brown dog</p>
}
I understand that Shallow is not meant to fully render the child components, ie the h1 tags and 'Hello World', but I thought it should at least care the order of those child components?
How do I check that a components children hasn't changed place, or been replaced by other components, without mounting the entire component tree?
EDIT: Here's the whole of my example.test.js file and the entire snapshot:
import React from "react";
import { shallow } from "enzyme";
import toJson from 'enzyme-to-json';
export const Page1 = () => {
return <div>
<Title/>
<Content/>
</div>
}
export const Page2 = () => {
return <div>
<Content/>
<Title/>
</div>
}
export const Title = ()=>{
return <h1>Hello World</h1>
}
export const Content= () =>{
return <p>The quick fox jumped over the brown dog</p>
}
test("Page", () => {
const wrapper1 = shallow(<Page1/>);
const wrapper2 = shallow(<Page2/>);
expect(toJson(wrapper1)).toMatchSnapshot();
expect(toJson(wrapper2)).toMatchSnapshot();
})
This is the snap it produces
// Jest Snapshot v1
exports[`Page 1`] = `
<div>
<Component />
<Component />
</div>
`;
exports[`Page 2`] = `
<div>
<Component />
<Component />
</div>
`;
