[英]How can I use jest coverage in Next.js styled-jsx?
我正在尝试将测试框架 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 。 但是,问题仍然存在并且对我没有帮助。
我该如何解决?
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 转换,这意味着生成的类不会在您的测试组件中生成。 例如,在我的情况下,这会破坏我的测试,因为我依赖于生成的类来隐藏某些元素,而我的测试依赖于那些被隐藏的元素。 我现在正想办法解决这个问题,但在您的情况下可能不是问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.