Question

最近，我已将样式化组件更新为4.1.1，并且大多数组件测试都已损坏。我只是创建一个哑巴组件来进行虚拟测试，然后看看它是否取决于其他测试的进行方式还是仅仅是样式化组件的当前版本。

提供此Button组件：

import styled from 'styled-components';

const Button = styled.button`
  color: red;
`;
export default Button;

这里是相对测试：

import React from 'react';
import renderer from 'react-test-renderer';
import 'jest-styled-components';
import Button from './Button';

test('it works', () => {
  const tree = renderer.create(<Button />).toJSON();
  expect(tree).toMatchSnapshot();
});

输出为：

Invariant Violation: Unable to find node on an unmounted component.

是否可能导致样式组件的最新版本以及其他一些依赖性？

我在官方文件中没有发现任何东西。

Answer 1

您的所有React依赖项是否都已更新和版本同步？ react，react-dom，react-test-renderer和react-is应该是同一版本，最好在16.4以上。

Answer 2

使用react-test-renderer和样式化的组件，我的问题永无止境。我发现的解决方法是使用另一个名为react-testing-library的npm模块

然后代替

const tree = renderer.create(<Button />).toJSON();

使用

const tree = render(<Button />).toJSON();

然后

expect(tree).toMatchSnapshot();

这应该有效！

开玩笑的样式组件4.1.1测试已损坏

2 个答案: