当前位置: 首页 > 面试题库 >

异步组件时使用React的Jest和酶进行测试

彭鸿哲
2023-03-14
问题内容
  • react:16.3.0-alpha.1
  • jest: “22.3.0”
  • enzyme: 3.3.0
  • typescript: 2.7.1

码:

class Foo extends React.PureComponent<undefined,undefined>{
   bar:number;
   async componentDidMount() {
     this.bar = 0;
     let echarts = await import('echarts'); // async import
     this.bar = 100;
   }
}

测试:

describe('...', () => {
  test('...', async () => {
    const wrapper = shallow(<Foo/>);
    const instance = await wrapper.instance();
    expect(instance.bar).toBe(100);
  });
});

错误:

Expected value to be:
  100
Received:
  0

问题答案:

解:

1:使用异步/等待语法。

2:使用安装座(不浅)。

3:等待异步组件生命周期。

例如:

    test(' ',async () => {
      const wrapper = mount(
         <Foo />
      );
      await wrapper.instance().componentDidMount();
    })


 类似资料:
  • 问题内容: 任何人都可以告诉我如何在安装调用组件时开玩笑地等待一个模拟的诺言解决吗? 将在我的笑话嘲笑测试 然后是我的测试文件: 问题是我正在返回,因为尚未进行模拟的api调用和生命周期方法。 问题答案: Jest有模拟假冒时间旅行的方法,要在您的情况下使用它,我想您可以按照以下样式更改代码: 另外,您也可以使用

  • 问题内容: 因此,我正在从基于类的组件转移到功能组件,但在使用jest / zyme编写功能组件内部的方法(显式使用钩子)编写测试时陷入困境。这是我的代码的精简版。 我知道我可以通过导出来编写测试。但是如何测试或方法呢?如果它是基于类的组件,那么我可以将组件变浅,并从实例中将其用作 但这不适用于功能组件,因为无法以这种方式访问​​内部方法。有什么方法可以访问这些方法,还是应该在测试时将功能组件视为

  • 问题内容: 我正在尝试测试React组件的样式属性。在测试中获取样式参数的最佳方法是什么? 目前,我最好的选择是测试HTML是否包含字符串,但是我认为有一个更好的选择。 案件: 要测试的组件是: 问题答案: 您可以使用此方法。它返回ReactElement。

  • 我必须在开玩笑的每个测试文件之前做一个异步设置(特别是每次启动一个MongoMemoryServer)。 使用setupFiles不工作,因为不处理异步工作。传递全局Promise不起作用,因为我必须在需要我的db模块之前设置db uri字符串(我不想在等待Promise后嘲笑它,那很糟糕)。 官方指南使用并使用设置mongo服务器。奇怪的是,医生说 注意:测试环境是沙盒。每个测试套件将在其自己的

  • 问题内容: 我希望能够在使用jest时使用webpack别名来解析导入,并且最好参考以避免重复。 开玩笑的conf: Webpack别名: 进口: 由于某种原因,导致了问题,因此将其删除(使用别名和导入)时,可以找到但仍然无法解决。 我尝试使用jest-webpack-alias,babel-plugin-module-resolver和Jest / Webpack docs 问题答案: 这似乎已

  • 问题内容: 我正在用React Native构建一个应用程序。我想尽量减少与数据库通信的频率,因此我大量使用了AsyncStorage。虽然在DB和AsyncStorage之间的转换中存在很多错误的余地。因此,我想通过对它运行自动化测试来确保AsyncStorage拥有我相信的数据。令人惊讶的是,我还没有找到有关如何在线进行操作的任何信息。我自己尝试做的尝试还没有完成。 使用笑话: 此方法失败,并