如何使用Next.js样式的jest报道？

Question

我正在尝试使用Next.js和样式-jsx的测试框架Jest。

这是我的外部css风格。

import css from 'styled-jsx/css';

export const TextStyle = css`
     p {
         font-size: 14px;
         color: #a8a8a8;
     }
`;

这是我的package.json脚本。效果很好。

"test": "jest --verbose",

我想使用覆盖选项。所以我尝试了这个"test": "jest --coverage --verbose"，但是它不起作用。

ReferenceError: css未定义

我读过这个https://github.com/zeit/styled-jsx/issues/436。然而，这个问题仍然没有解决，对我没有帮助。

我怎么才能修好它？

Answer 1

styled-jsx 文档提到了如何解决这个问题，但对我来说并不是很好。

我通过执行以下操作使其工作:将package.json测试脚本中的节点env设置为" test“，如下所示(如果需要，也可以添加--verbose标志)：

    "test": "NODE_ENV=test jest",
    "test:coverage": "NODE_ENV=test jest --coverage"

在您的babel配置中(在我的示例中是.babelrc)，将babel-test: true添加到test env配置中，如下所示(有关更多细节，请参阅Next 文档 )：

{
  // this is your original config, it's required if you don't have a babel config yet and are using `Next` since `Next` normally does it under the hood for you:
  "presets": [
    [
      "next/babel",
    ]
  ],
  // this is what you're adding:
  "env": {
    "test": {
      "presets": [
        [
          "next/babel",
          {
            "styled-jsx": {
              "babel-test": true
            }
          }
        ]
      ]
    }
  }
}

您的测试现在应该通过，但可能会显示一个警告：styled-jsx/css: if you are getting this error it means that your css tagged template literals were not transpiled.。

在这种情况下，您应该为jest添加一个用于styled-jsx/css的自动模拟，方法是从项目的根目录( __mocks__文件夹必须是node_modules文件夹的同级)添加一个新的文件，这个路径为。

function css() {
  return ""
}

module.exports = css

*注意:整个设置所做的是在运行测试时禁用样式-jsx转换溢出，这意味着生成的类不会在测试组件中生成。例如，在我的例子中，这破坏了我的测试，因为我依赖于生成的类来隐藏一些元素，而我的测试依赖于隐藏的那些元素。我现在正试图找出解决这个问题的方法，但在你的情况下可能不是问题。