reactjs - 使用 Jest 确定两个对象是否具有相同的结构

Question

我正在开发一个具有多个主题的 React 应用程序。每个主题都应具有相同的结构，可以具有深层嵌套的属性，但具有不同的值。这是我要为其添加测试用例的结构。

我想使用 Jest 来确定我的每个主题的结构是否相同，以确保没有遗漏任何属性。

我所有的主题对象都具有相同的结构，但具有不同的属性。它们的设置类似于:

{
  brand: '...',
  navigation: {
    background: '...',
    link: {
      background: '...',
    },
    ...
  },
  ...
}

我知道 toEqual 和 toMatchObject 等属性，但如果我直接尝试将两个主题相互比较，这两个都会失败:

expect(themeA).toMatchObject(themeB);

这会失败，因为每个属性的值 都不同。例如，themeA 的 brand 属性设置为 '#ABC' 而 themeB 的相同属性设置为'#DEF'。

我也知道可以像这样使用 Jest 定义结构:

expect(themeA).toEqual({
  brand: expect.any(String),
  navigation: {
    background: expect.any(String),
    ...
  },
  ...
})

...但这将需要在每次添加或删除新属性时更新测试用例，我觉得这会使测试的目的复杂化。

有没有一种简单的方法来测试两个对象是否具有相同的结构但不同的值？

Answer 1

您可以通过实现自定义匹配器来实现您想要的。可以使用 extend 扩展 jest 的匹配器。方法。

作为概念验证，您可以像这样定义一个toMatchStructure 匹配器:

function hasEqualStructure(obj1, obj2) {
    return Object.keys(obj1).every(key => {
        const v = obj1[key];

        if (typeof v === 'object' && v !== null) {
            return hasEqualStructure(v, obj2[key]);
        }

        return obj2.hasOwnProperty(key);
    });
}

export default function toMatchStructure(actual, expected) {
    const pass = hasEqualStructure(actual, expected);

    return {
        message: () => `expected ${expected} to match structure ${actual}`,
        pass
    };
}

请注意，此匹配器不考虑边缘情况(不检查对象是否为空)。此外，如果 obj2 是 obj1 的超集(即具有相同的属性加上一些 obj1 中不存在的额外属性)，则匹配器将通过).此外，它只是检查键是否存在，但它可以扩展为检查这些属性中值的类型是否相同。您还可以编辑返回的消息，以便对失败的测试更加友好。

考虑到这一点，您现在可以通过调用扩展 Jest 匹配器:

expect.extend({
   toMatchStructure,
});

理想情况下，您将在一个文件中执行此操作，该文件将通过 setupFilesAfterEnv 执行。 Jest 配置选项。

完成设置后，您可以在测试中调用匹配器:

expect(themeA).toMatchStructure(themeB);