开发者问题收集

在“create-react-app”应用程序中使用 Enzyme 对 React/Redux 进行单元测试

2018-05-09
1004
reactjs jestjs enzyme

我想对我使用“create-react-app”包创建的应用程序进行一些基本的单元测试。我相信它已经安装了 Jest。

我的应用程序中有一些基本的 redux 代码。

我想测试：

  1. 它呈现主要组件（App.js）而不会崩溃

  2. 单击以显示下一个项目功能

我已经使用“npm install --save-dev digest”和“enzyme-adapter-react-15”安装了 Enzyme。

这是我的代码： 

import React from 'react';
import ReactDOM from 'react-dom';
import {App} from './App';
import { shallow, mount, render, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-15';

configure({ adapter: new Adapter() });

describe('A test for App component', () => {
 let wrapper

 beforeEach(()=>{
   wrapper = shallow(<App />);
 })

 it('should render App Component', () => {
   expect(wrapper).to.have.length(1)
 })
})

我无法让测试开始工作。错误信息： 

TypeError: Cannot read property 'length' of undefined

和 

TypeError: Cannot read property 'have' of undefined

我认为我做错了一些基本的事情。

如能得到任何帮助我将不胜感激！！！

2个回答

您正在使用 Jest 的 expect 函数。您需要明确声明从 chai 导入。

它看起来像这样： 

import { expect } from 'chai'
it('should render App Component', () => {
    expect(wrapper).to.have.length(1)
})

此外，您无需为每个测试添加适配器配置，只需将文件 setupTests.js 添加到 /src ，它将适用于所有测试 :-)

erich
2018-05-09

您可能从使用 chai 的 Enzyme 网站上的示例中复制了它。您尝试测试的 jest 等效项是： 

it('should render App Component', () => {
   expect(wrapper).toHaveLength(1)
})
SrThompson
2018-05-09