使用 Jest 对 ChartJS 组件进行快照测试

阿布舍克昌达

我正在为使用 ChartJS v2 的 React 组件编写一些开玩笑的快照测试。我对Customer组件的测试如下所示

import React from 'react';
import renderer from 'react-test-renderer';

import CustomerComponent from '../src/components/customer/Customer';

describe('Customer', () => {
  it('renders customer', () => {
    const tree = renderer.create(
      <Customer customerId={291}/>
    ).toJSON();
    expect(tree).toMatchSnapshot();
  });
});

当我开玩笑地运行它时,我得到了这个

 FAIL  tests/Customer.test.js
  ● Test suite failed to run

    ReferenceError: window is not defined

      at node_modules/chart.js/src/core/core.helpers.js:672:10
      at Object.<anonymous>.module.exports (node_modules/chart.js/src/core/core.helpers.js:680:3)
      at Object.<anonymous> (node_modules/chart.js/src/chart.js:6:31)
      at Object.<anonymous> (node_modules/react-chartjs-2/lib/index.js:20:14)

ChartJS 似乎希望定义一个不可用的窗口对象,因为它没有在浏览器中运行。有没有办法让快照测试与 ChartJS 一起使用?

安德烈亚斯·科伯勒

只需从 chartsjs 模拟出图表组件

jest.mock('react-chartjs2', () => 'Chart')

这将用转储组件替换原始组件,该组件将像<Chart prop="prop">在您的快照中一样呈现

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在嵌套的反应导航组件上使用Jest进行快照测试-对象键更改,因此快照匹配失败

React Jest匹配快照,使用子组件测试组件时崩溃

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

使用window.require进行Jest测试电子/反应组件

使用Jest on React组件进行单元测试

使用 Jest 的快照测试内部函数

使用Jest测试登录组件

使用Jest测试组件失败

使用Jest手动模拟React-Intl进行快照测试

用Jest进行快照测试,子组件如何从父组件调用函数?

使用 jest 进行 Redux 测试

如何使用 Jest 对连接的 Redux 组件内的组件中的 Redux 操作进行单元测试

使用Jest的ReactJS测试组件方法

如何使用Jest测试JSX Vue组件

如何使用Jest测试异步组件?

使用Jest测试类组件Firebase操作

使用 jest Enzyme 测试输入组件

使用 react-query 和 axios 测试 React 组件中的错误的问题。使用 React 测试库、Jest、MSW 进行测试

如何使用不同的jest.config.js进行单元和组件测试?

如何使用Jest对Vue.js组件中的方法进行单元测试

使用jest-mock-extended和Spectator进行角度组件测试

如何使用 store 和 propsData 挂载 Nuxt 组件以进行 Jest 测试

如何使用Babel-Jest进行测试

使用Jest和Webpack别名进行测试

使用 axios 调用进行 Jest 测试

使用 Jest 酶进行异步/等待测试

使用 Jest/Enzyme 进行 FlatList 测试

使用 Jest/Supertest 进行 Express/Typescript 测试

如何使用react-testing-library对进行异步数据加载的组件进行快照测试?