如何在 Next.js styled-jsx 中使用笑话覆盖率？

Question

我正在尝试将测试框架 Jest 与 Next.js 和 styled-jsx 一起使用。

这是我的外在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 is not defined

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

我该如何解决？

Answer 1

styled-jsx docs 提到如何解决它，但对我来说效果不佳。

我通过执行以下操作使其工作：像这样将 package.json 测试脚本中的节点环境设置为“测试”（如果需要，也可以添加 --verbose 标志）：

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

在你的 babel 配置中（.babelrc 在我的例子中）将 babel-test: true 添加到 test env 配置中（参考 Next docs了解更多详情）：

{
  // 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.

在这种情况下，您应该为 styled-jsx/css 添加一个 jest 自动模拟，方法是从项目的根目录添加一个具有 这个确切路径 的新文件（__mocks__ 文件夹必须是 node_modules 文件夹的兄弟文件夹）/__mocks__/styled-jsx/css.js:

function css() {
  return ""
}

module.exports = css

*注意：整个设置所做的是在您运行测试时禁用 styled-jsx 转译，这意味着生成的类不会在您的测试组件中生成。例如，在我的例子中，这破坏了我的测试，因为我依赖于生成的类来隐藏一些元素，而我的测试依赖于那些被隐藏的元素。我现在正在想办法解决这个问题，但这对你来说可能不是问题。

如何在 Next.js styled-jsx 中使用笑话覆盖率？

How can I use jest coverage in Next.js styled-jsx?

reactjs

jestjs

next.js

styled-jsx