reactjs - Jest 测试仅在覆盖范围内失败

Question

我遇到的问题是，如果我在没有 --coverage 选项的情况下运行测试，一切都会通过，但是一旦我使用 -- 运行 jest ，覆盖选项我的一些测试失败了。

这是日志:

Button › Primary button › should render a primary button

  undefined:3:457: property missing ':'

  at Object.it (src/components/Buttons/Button/Button.test.js:13:24)
  at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)

测试:

it('should render a primary button', () => {
  const props = { primary: true };

  const rendered = renderer.create(<Button { ...props }>Some Button</Button>).toJSON();
  expect(rendered).toMatchSnapshot();
});

失败的行是expect(rendered).toMatchSnapshot();

有人有什么想法吗？

Answer 1

我解决了这个问题。但我认为这是一个非常具体的问题。

我们正在使用样式组件，我做了这样的事情:

const BaseButton = styled.button`
  ${ noTouchDevice && `
    :hover {
      cursor: ${ ({ disabled }) => (disabled ? 'not-allowed' : 'initial') };
    }
  ` }
`;

这不起作用，因为嵌套模板文字不像外部模板那样由样式组件处理。这意味着如果 styled-components 在外部字符串文字中找到一个函数，它会调用它并将组件 props 作为参数传递。但是嵌套模板文字不会这样处理。

这就是为什么在快照中我得到这样的内容:

.c0:hover {
  cursor: ({ disabled }) => disabled ? 'not-allowed' :'initial';
}

而不是

.c0:hover {
  cursor: not-allowed;
}

仅运行测试工作正常，但通过覆盖率收集，在比较快照时失败。

所以我只是将代码更改为仅使用三元运算符，例如

const BaseButton = styled.button`
  ${ noTouchDevice && `
    :hover {
      cursor: ${ disabled ? 'not-allowed' : 'initial' };
    }
  ` }
`;

效果很好。

我仍然不知道，为什么错误只在收集覆盖率时发生。老实说，我还不想投入更多时间，但我认为这与 jest/istanbul 收集覆盖范围时如何调用测试有关。