为什么我在运行玩笑测试时会出现“未定义：x：y：属性”丢失错误？

Question

我正在使用 jest 和 styled-components，或者更具体地说 jest-styled-components 进行测试。

我对一个名为 FormField 的组件进行了更改，该组件使用了 Form 组件，在运行测试时，出现以下错误。

    undefined:42:16: property missing ':'

      31 |     );
      32 |     const tree = component.toJSON();
    > 33 |     expect(tree).toMatchSnapshot();
         |                  ^
      34 |   });
      35 | 
      36 |   test('update', () => {

笑话测试如下

  test('with field', () => {
    const component = renderer.create(
      <Grommet>
        <Form>
          <FormField name="test" />
        </Form>
      </Grommet>,
    );
    const tree = component.toJSON();
    expect(tree).toMatchSnapshot();
  });

我无法确定问题所在，我对组件所做的更改没有显示任何错误，并且我在 FormField 组件的测试中遇到了相同的错误。

Answer 1

我已经解决了这个问题。 造成这个问题的原因是我对组件进行更改后没有更新快照。

可以用

来完成

jest --updateSnapshot or jest --u

Answer 2

我花了很长时间面对同样的问题。我正在使用样式化组件库，由于样式文件之一中的 css 属性无效而出现问题。不幸的是，React 没有在渲染时捕获这个问题。

我的组件样式的问题：

背景颜色：红色；

我通过将样式更新为（删除空格）来修复上述问题：

背景颜色：红色；

如果您正在使用样式组件库，强烈建议检查样式文件的索引。