Question

我注意到快照看起来像这样：

exports[`shallow 1`] = `
<div>
  <Component />
  <Component />
</div>
`;

在执行快照时，以下两个组件相同：

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>
}

我理解Shallow并不是要完全呈现子组件，即h1标签和'Hello World'，但我认为它至少应该关注那些子组件的顺序？

如何在未安装整个组件树的情况下检查组件子组件是否未更改位置或已被其他组件替换？

编辑：这是我的example.test.js文件和整个快照的全部内容：

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();
})

这是它产生的快照

// Jest Snapshot v1

exports[`Page 1`] = `
<div>
  <Component />
  <Component />
</div>
`;

exports[`Page 2`] = `
<div>
  <Component />
  <Component />
</div>
`;

Answer 1

这结果是一些配置问题。我没有使用toJson，而是将序列化程序放在jest配置中。然后我将酶降至json。这解决了我的问题。然后我删除了我的node_modules，并重新安装了所有内容。

现在它正在工作，即使我将所有内容改回原来的样子，使用版本3.3.3的酶到json，并使用toJson函数，一切仍然有效。我仍然不知道根本原因是什么，但我怀疑我的包装是如何安装的。

Enzyme Shallow快照不关心子组件的顺序

1 个答案: