使用酶、jest和preact进行返回空对象的快照测试

Question

我正在使用酶和Jest的组合在preact项目中做快照测试，当与jest和Preact一起使用时，shallow和mount返回ShallowWrapper{}和ReactWrapper{}。我在jest.config.js中使用了enzyme-with-json进行序列化，它会返回预期的结果，但expect在与toMatchSnapshot一起使用时会失败，因为它会将其与空对象进行比较。

import { shallowToJson } from 'enzyme-to-json';
import { shallow } from 'enzyme';
import Loader from './index';

describe('Loader Component', () => {
  it('should render correctly', () => {
    const component = shallow(<Loader />);
    console.log(component); // returns ShallowWrapper{}
    expect(shallowToJson(component)).toMatchSnapshot();
  });
});

我的设置：

"preact" : 10.3.3,
"jest": 26.0.1,
"jest-enzyme": 7.1.2
"enzyme-to-json": 3.5.0
"enzyme-adapter-preact-pure" : 2.2.0

下面是我提供给Jest的设置文件：

import { configure } from 'enzyme';
import 'jest-enzyme';
import Adapter from 'enzyme-adapter-preact-pure';

configure({ adapter: new Adapter() });

有人能帮我找出我遗漏了什么吗？

Answer 1

尝试使用expect(toJson(component)).toMatchSnapshot();第一次运行时会显示类似"Snapshot generated“的内容。保存快照，下一次它将进行比较，并在出现错误时给出错误。