Question

我目前在针对reactjs应用程序编写的单元测试中遇到装饰器问题。

我喜欢通过在反应组件中引入装饰器来避免这么多模板的方式，组件看起来很干净，代码变得更易读。但是现在对这个无意义的装饰者感到烦躁，因为我无法运行单个单元测试，这是我的应用程序上下文中的必须测试。代码描述如下：

@translate(['common'])
export default class MyComponent extends React.Component {
 ...
 componentDidMount() {
  // Ajax call on success setting the state this.setState({ myData: response.data })
 }
 ...
}

想要测试这个组件状态，我收到了ajax成功响应。

我的测试如下所示

describe('<MyComponent />', function () {
 sinon.stub(dataService, 'fetchData')
  callsFake(function () {
   return Promise.resolve(['one', 'two', 'three'])
  });
 it('should match the state with data fetched', function () {
  const wrapper = mount(<MyComponent />);
  return dataService.fetchData()
   .then(function () {
    expect(wrapper.state('myData')).to.have.lengthOf(3);
   });
 });
});

如果我从我的组件中删除@translate（[＆＃39; common＆＃39;]），则上述测试效果很好，但如果存在则无法工作。我知道翻译是一个HOC，我需要相应地调整我的测试，但相信我，我尝试了一切，没有什么对我有用。还有一种方法可以通过在组件1中添加多个导出来实现这个工作是纯粹的，而另一个用translate包装但是对于这个解决方案我也必须删除我喜欢的源代码中的装饰器。

那么我们有什么方法可以配置我们的webpack在运行测试时忽略或跳过源代码中的这些装饰器？

Answer 1

因为装饰器只是Higher-Order Functions的糖，你可以将类声明和类的装饰分开，但是因为you can only use decorators on an export when exporting a class而失去了漂亮的@装饰语法：

export class MyComponent extends React.Component {
 ...
 componentDidMount() {
  // Ajax call on success setting the state this.setState({ myData: response.data })
 }
 ...
}

export default translate(['common'])(MyComponent)

在您的测试中，您现在可以导入底层的＆＃34;未修饰的＆＃34;类：

import {MyComponent} from '...'

那么我们有什么方法可以配置我们的webpack在运行测试时忽略或跳过源代码中的这些装饰器？

我不相信有任何方法可以让webpack忽略类的装饰。它可能创建一些解析文件和删除装饰语句的插件，但这样做太过分了，会对应用程序开发和构建过程的其他部分产生无数影响。

有可能只为测试忽略装饰器吗？

1 个答案: