jestenzyme 应该是 devDependency 还是 dependency

JS

使用jest/enzyme应该作为devDependency

在前端开发中，测试是非常重要的一环。而对于React项目来说，jest和enzyme是非常流行的测试工具。那么在项目中，我们应该将它们作为dependency还是devDependency呢？

首先，我们需要了解一下dependency和devDependency的区别。dependency是指项目运行时所依赖的模块，而devDependency则是指开发过程中所依赖的模块。换句话说，dependency是项目运行所必需的，而devDependency只是在开发过程中需要的。

基于这个理解，我们可以得出：jest和enzyme应该作为devDependency。因为它们只在开发过程中需要用到，而项目运行时并不依赖它们。这样做的好处是，可以减小项目的体积，提高项目的打包速度。

在使用jest和enzyme之前，我们需要先安装它们。在package.JSon文件中，我们可以看到两个关键的字段："dependencies"和"devDependencies"。我们可以通过npm或者yarn来安装它们，具体的命令如下：

npm install jest enzyme enzyme-adapter-react-16 --save-dev

或者

yarn add jest enzyme enzyme-adapter-react-16 --dev

安装完成后，我们就可以在项目中使用它们了。

接下来，让我们来看一下如何使用jest和enzyme进行测试。首先，我们需要创建一个测试文件，命名为example.test.JS。在该文件中，我们可以编写我们的测试代码。下面是一个简单的例子：

Javascript
import React from 'react';
import { shallow } from 'enzyme';
import ExampleComponent from './ExampleComponent';
describe('ExampleComponent', () => {
  it('renders without crashing', () => {
    shallow(<ExampleComponent />);
  });
  it('renders the correct text', () => {
    const wrapper = shallow(<ExampleComponent />);
    const text = wrapper.find('p').text();
    expect(text).toEqual('Hello, World!');
  });
});

在上面的例子中，我们首先引入了React和enzyme的shallow函数。然后，我们导入了需要测试的组件ExampleComponent。在describe块中，我们可以编写多个it块来描述不同的测试用例。

第一个测试用例测试了ExampleComponent能否正常渲染，我们只需要调用shallow函数，并传入ExampleComponent组件即可。

第二个测试用例测试了ExampleComponent是否渲染了正确的文本。我们首先通过shallow函数创建了ExampleComponent的wrapper对象，然后使用wrapper.find方法找到文本所在的p标签，并通过text方法获取文本内容。最后，我们使用expect断言来判断文本是否和预期值相等。

通过以上的例子，我们可以看到，使用jest和enzyme进行测试非常简单。我们只需要编写一些测试用例，并使用一些断言来判断结果是否符合预期。

在React项目中，jest和enzyme是非常流行的测试工具。在选择将它们作为dependency还是devDependency时，我们可以根据它们是否是项目运行所必需的来进行判断。由于jest和enzyme只在开发过程中需要用到，因此我们应该将它们作为devDependency来安装和使用。

同时，我们还展示了一个简单的例子，来演示如何使用jest和enzyme进行测试。通过编写测试用例和使用断言，我们可以很方便地进行各种测试，并验证结果是否符合预期。

希望本文对你理解jest和enzyme的使用有所帮助，以及对dependency和devDependency的区别有所了解。祝你在项目开发中能够更好地利用这两个工具进行测试。