Question

我正在尝试找到解决方案，如何避免Jest快照中出现整个主题对象。

例如，我得到了这个简单的测试。

test("render", () => {
  const wrapper = shallow(<Result item={item} />);
  expect(wrapper).toMatchSnapshot();
});

Result.js

const Title = styled.h3`
  background-color: ${({ theme }) => theme.colors['primary']};    
`

Title.defaultProps = {
  theme: defautlTheme,
};


export default ({ item }) => (
 <div>
   <Title>{item.title}</Title>
   <p>{item.info}</p>
 </div>
);

快照类似于：

  exports[`render 1`] = `
       <div>
         <Result__Title
           theme={
             Object {
               "colors": Object {
                 "accent-100": "#000000",
                  "accent-200": "#000000",
                  "accent-300": "#000000",
                  "accent-400": "#000000",
                  "accent-500": "#f1c933",
                  "accent-600": "#000000",
                  "accent-700": "#ebbd10",
                  "accent-800": "#000000",
                  "accent-900": "#000000",
                  "black": "#000",
                  ....

可以通过某种方式在使用shallow的快照中避免使用此主题。如果我更改主题的颜色会很烦人，那么测试将在其他许多地方失败。

Answer 1

您可以尝试模拟主题并将其作为道具传递。

const theme = {}

test("render", () => {
  const wrapper = shallow(<Result item={item} theme={theme} />);
  expect(wrapper).toMatchSnapshot();
});

实际上，在测试套件中，主题将始终相同，而不反映快照中真实的theme变化。

样式化的组件-酶浅快照

1 个答案: