如何在 Next.js styled-jsx 中使用 jest 覆蓋？

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" ，但它不起作用。

參考錯誤：未定義 css

我已經閱讀了這個https://github.com/zeit/styled-jsx/issues/436 。 但是，問題仍然存在並且對我沒有幫助。

我該如何解決？

Answer 1

styled-jsx文檔提到了如何解決它，但這對我來說效果不佳。

我通過執行以下操作使其工作：將package.json測試腳本中的節點 env 設置為“測試”，就像這樣（如果需要，也可以添加--verbose標志）：

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

在您的 babel 配置（在我的情況下為.babelrc ）中，像這樣將babel-test: true添加到test配置中（有關更多詳細信息，請參閱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文件夾） /__mocks__/styled-jsx/css.js ：

function css() {
  return ""
}

module.exports = css

*注意：整個設置的作用是在您運行測試時禁用 styled-jsx 轉換，這意味着生成的類不會在您的測試組件中生成。 例如，在我的情況下，這會破壞我的測試，因為我依賴於生成的類來隱藏某些元素，而我的測試依賴於那些被隱藏的元素。 我現在正想辦法解決這個問題，但在您的情況下可能不是問題。