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

Question

我有一个问题，如果我运行我的测试没有 --coverage 选项，一切都会通过，但是一旦我运行 jest 使用 --coverage 选项我的一些测试失败了。

这是日志：

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 在外部字符串文字中找到一个函数，它会调用它并将组件道具作为参数传递。但是嵌套的模板文字不会像这样处理。

这就是为什么在快照中我得到这样的东西：

.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 收集覆盖率时如何调用测试有关。

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

Jest tests failing only with coverage

istanbul

reactjs

jestjs

create-react-app