Question

在我的代码中，我使用babel-plugin-react-css-modules，它几乎与react-css-modules相同

我在反应组件中有这样的代码。 styleName用于CSS模块，我在countdownForm.local.scss中为它们定义样式 className代表我的Bootstrap类

import './countdownForm.local.scss'

class CountdownForm extends Component {
...
render () {
    return (
      <div styleName="first" className="container">
        ...
      </div>
    )
  }
}

要在我的测试中测试这个组件，我必须使用ignore-styles包，因为JavaScript无法处理CSS语法，当我们运行单元测试时，测试将尝试导入没有Webpack的CSS文件结果错误。

import register from 'ignore-styles'
import React from 'react'
import test from 'tape'
import CountdownForm from 'CountdownForm'

register(undefined, () => ({styleName: 'fake_class_name'}))

test('CountdownForm => should exist', (t) => {
  t.ok(CountdownForm)
  t.end()
})

通过这样做，一切都很顺利，测试工作没有问题，但我总是在控制台中收到此警告

警告：标记上的未知道具styleName。从中删除此道具元素。

这不是功能问题，因为测试有效，但每次运行测试时都会收到此消息很烦人。如何解决，摆脱它？

Answer 1

警告是因为您没有在测试前运行babel-plugin-react-css-modules编译步骤。

这可以通过用计算出的CSS模块类名替换styleName prop来实现。因此，styleName实际上永远不会传递给真实版本中的div（https://github.com/gajus/babel-plugin-react-css-modules#how-does-it-work）。它会将您的组件重写为类似......

class CountdownForm extends Component {
  ...
  render () {
    return (
      <div className="container CountdownForm_first_123xyz">
        ...
      </div>
    )
  }
}

在您的测试中，如果不首先运行babel插件，您将成功设法通过ignore-styles忽略CSS导入，但道具替换没有发生，因此您最终传递了styleName支持div，它不是div组件的已定义属性，因此React会警告你

解决这个问题的最佳方法是在测试之前运行一个babel编译步骤，这样你也可以测试真实的本地化类名分配

反应CSS模块并测试组件

1 个答案: