具有特定数量的样式化实例的样式化组件错误答案

【问题标题】：Styled Component Error with specific amount of styled instances具有特定数量的样式化实例的样式化组件错误
【发布时间】：2020-11-30 05:40:04
【问题描述】：

从样式化组件运行我的笑话测试时，我目前收到以下错误：

试图插入一个新的样式标签，但是给定的节点被卸载了！

您是否使用了未安装的自定义目标？

您的文档是否没有有效的 head 元素？

您是否不小心手动删除了样式标签？

这是针对以下代码的：

import * as React from "react";
import { Heading } from "./heading";
import { MTButton } from "mtbutton";
import styled from "styled-components";

type FactsProperties = {
    facts: any;
    title: string;
    articleURL: string;
};

type FactsState = {
    currentFact: any;
};

const FactsDiv = styled.div`
    text-align: center;
`;

const FactDiv = styled.div`
    display: flex;
`;

const PageButton = styled.button`
    cursor: pointer;
`;

当我删除底部的 PageButton 声明时，它可以工作。在收到上述错误之前，我似乎只能在此文件中放置 2 个样式声明。据我所知，我已将组件 4.4.1 固定在所有依赖项中。

【问题讨论】：

标签： javascript reactjs typescript styled-components

【解决方案1】：

我在向styled 添加额外调用时遇到了同样的错误。

在我的情况下，将styled-components 更新到 v5 (5.3.3) 并将 jest-styled-components 更新到 v7 (7.0.8) 解决了这个问题。但是，我仍然不确定根本问题是什么。

【讨论】：

【解决方案2】：

似乎答案在于 jest 如何处理模块。将以下内容放入jest.config.js 后，即可恢复正常工作：

  moduleDirectories: [
    "<rootDir>/node_modules",
    "node_modules"
  ],

【讨论】：