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在外部字符串文字中找到一个函数，它会调用它并将组件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收集覆盖范围时调用测试的方式有关。

Jest测试仅在覆盖

1 个答案: