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

Question

I am using jest & styled-components, or more specificallyjest-styled-components for testing.

I have made changes to a component called FormField , which used the component Form , when running the tests, I am getting the following error.

    undefined:42:16: property missing ':'

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

The jest test is as following

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

I can't pinpoint what the problem is, the changes I made to the component did not show any errors, and I'm getting the same errors in the testing of FormField component.

Answer 1

I have fixed the problem. The problem was caused because I did not update the snapshot after the changes I made to the component.

It can be done with

jest --updateSnapshot or jest --u

Answer 2

The problem might be with the CSS you are using. I had the same issue and removing the CSS values in px and rem fixed the issue.