利用 Jest 和Enzyme构建 TDD 应用程序

最新推荐文章于 2024-02-14 17:09:46 发布

树根朽木

最新推荐文章于 2024-02-14 17:09:46 发布

阅读量473

点赞数

分类专栏： React

本文链接：https://blog.csdn.net/jiaoqi6132/article/details/108737867

版权

React 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

第一章浅层渲染(Shallow Renderer)

当为 React 写单元测试时，浅层渲染(Shallow Renderer) 会变得十分有用。浅层渲染使你可以渲染 “单层深度” 的组件，并且对组件的 render 方法的返回值进行断言，不用担心子组件的行为，组件并没有实例化或被渲染。浅渲染并不需要 DOM。

第一节概述

1.1 简单的使用

要开始使用 Jest，你不需要安装任何东西; 它是 Create React App 的一部分。如果查看 package.json 文件，您将看到已经有一个脚本用于运行测试。

function MyComponent() {
  return (
    <div>
      <span className="heading">Title</span>
      <Subcomponent foo="bar" />
    </div>
  );
}

import ShallowRenderer from 'react-test-renderer/shallow';

// in your test:
const renderer = new ShallowRenderer();
renderer.render(<MyComponent />);
const result = renderer.getRenderOutput();

expect(result.type).toBe('div');
expect(result.props.children).toEqual([
  <span className="heading">Title</span>,
  <Subcomponent foo="bar" />
]);

1.2 API讲解

shallowRenderer.render()shallowRenderer.render() 和 ReactDOM.render()很像。但是它不需要 DOM 并且只渲染一层。这就意味着你可以测试与子组件行为隔离的组件。

shallowRenderer.getRenderOutput()在 shallowRenderer.render() 被调用后, 你可以调用 shallowRenderer.getRenderOutput() 来获取浅渲染的输出.

expect在编写测试时，通常需要检查值是否满足某些条件。Expect 可以让你访问许多“匹配器” ，让你验证不同的东西。

.toBe(value)使用。比较基本值或检查对象实例的引用标识。它调用 Object.is 来比较值，这在测试中甚至比 = = = 严格相等运算符更好。

当我们在jest中进行年使用的时候

const can = {
  name: 'pamplemousse',
  ounces: 12,
};

describe('the can', () => {
  test('has 12 ounces', () => {
    expect(can.ounces).toBe(12);
  });

  test('has a sophisticated name', () => {
    expect(can.name).toBe('pamplemousse');
  });
});

.toMatchSnapshot(propertyMatchers?, hint?)这可以确保某个值与最近的快照匹配。有关详细信息，请参阅快照测试指南。

使用 Jest toMatchSnapshot 假设，您可以测试组件的结构。将呈现组件，而 toMatchSnapshot 将从这个呈现中创建一个快照，并在每次测试运行时将其与实际组件进行比较:

1.3 向 SubHeader 组件传值

您可以通过向 SubHeader 组件传递(例如) title prop 来检查快照的工作方式。要做到这一点，创建一个新的测试场景，它应该呈现带有标题的 SubHeader。另外，将渲染器常量的创建移动到 describe 函数，这样它就可以被所有的测试场景使用:

import React from 'react';
import ShallowRenderer from 'react-test-renderer/shallow';
import SubHeader from './SubHeader';

describe('the <SubHeader /> component', () => {
+  const renderer = new ShallowRenderer();

  it('should render', () => {
-   const renderer = new ShallowRenderer();    
    renderer.render(<SubHeader />);
    const component = renderer.getRenderOutput();

    expect(component).toMatchSnapshot();
  });

+  it('should render with a dynamic title', () => {
+    renderer.render(<SubHeader title='Test Application' />);
+    const component = renderer.getRenderOutput();

+    expect(component).toMatchSnapshot();
+  });
});

这里我们看到他传递了title = “Test Application”

当你再次更改的时候,他会返回

通过按 u 键，您可以更新快照来处理这个新的测试场景。

当你按下u后

除了 title 之外，这个组件使用 goBack 和 openForm 作为道具，其中 openForm 道具的默认值为 false。

当 goBack 有一个值时，创建一个按钮将我们带回到前一页，而当 openForm 有一个值时，创建一个按钮允许我们进入下一页，这样我们就可以添加一个新的评论。您还需要将这两个新的测试场景添加到 src/components/Header/SubHeader.test.js 文件中:

您现在已经为 SubHeader 组件创建了两个以上的快照，这将导致总共四个快照。Jest 做的另一件事是向您展示测试覆盖了多少行代码。您的测试覆盖率越高，就越有理由认为您的代码是稳定的。你可以通过使用 – coverage 标志执行测试脚本命令来检查你的代码的测试覆盖率，或者在你的终端中使用以下命令:

在创建后面两个快照的时候,会导致一些的错误

使用

 npm run test -- --coverage

来查看覆盖率

第二章使用断言来测试组件

快照测试并不一定是不好的实践; 但是，随着时间的推移，您的文件可能会变得相当大

使用断言来测试

你可以删除快照测试，因为你只想用断言来测试孩子:

import React from 'react';
import ShallowRenderer from 'react-test-renderer/shallow';
import Button from './Button';

describe('the <Button /> component', () => {
    const renderer = new ShallowRenderer();
    

      it('should render the correct children', () => {
            const children = 'This is a button';
            renderer.render(<Button>{children}</Button>);
            const component = renderer.getRenderOutput();

            expect(component.props.children).toEqual(children);
          });
});

断言就是expect

第三章使用Enzyme进行浅层渲染

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

Enzyme 和浅层渲染的区别

        -    renderer.render(<SubHeader title='Test Application' />);
        -    const component = renderer.getRenderOutput();
            const component = shallow(<SubHeader title='Test Application' />);

        -    renderer.render(<SubHeader goBack={() => {}} />);
        -    const component = renderer.getRenderOutput();
            const component = shallow(<SubHeader goBack={() => {}} />);

-   expect(component.props.children).toEqual(children)
+   expect(component.props().children).toEqual(children)

第四章测试shallow rendering呈现的断言

一个简单的style的教程

https://www.jianshu.com/p/2d5f037c7df9

第一节模拟点击事件

.simulate(event[, data]) => ShallowWrapper
Simulates an event on the current node.

expect(mockOnClick).toHaveBeenCalled();

使用.toHaveBeenCalled可以确保调用了模拟函数。

这样子 ,我们在button组件中设置好了,如何在

subHeader中使用

1.检查标题

    it('should render', ()=>{
        const component = shallow(<SubHeader />);
        expect(component).toMatchSnapshot();

    })

2.检查goBackButton 是不是存在

需要导入SubHeaderButton

    it('should render with a goback button', () => {
            const mockGoBack = jest.fn();
            const component = shallow(<SubHeader goBack={mockGoBack} />);

            const goBackButton = component.find(SubHeaderButton);
            expect(goBackButton.exists()).toBe(true);
        goBackButton.simulate('click');
        expect(mockGoBack).toHaveBeenCalled();
    });

SubHeaderButton 是使用style的,所以,你要先了解下

find(selector) => ShallowWrapper  

Find every node in the render tree that matches the provided selector.

.at(index) => ShallowWrapper
Returns a wrapper of the node at the provided index of the current wrapper.

完整的

it('should render with a buttons and handle the onClick events', () => {
 const mockGoBack = jest.fn();
     const mockOpenForm = jest.fn();
         const component = shallow(<SubHeader openForm={mockOpenForm} goBack={mockGoBack}  />);

         const goBackButton = component.find(SubHeaderButton).at(0);
    expect(goBackButton.exists()).toBe(true);

       const openFormButton = component.find(SubHeaderButton).at(1);
       expect(openFormButton.exists()).toBe(true)

    goBackButton.simulate('click');
    expect(mockGoBack).toHaveBeenCalled();

        openFormButton.simulate('click');
        expect(mockOpenForm).toHaveBeenCalled();
});

其实这里的测试有个问题

当你调换openForm何goBack两者的位置,它没有因为洽谈而区别,因为他们有这一样的测试特征

第五章与Enzyme的集成测试

第一节测试Context

测试场景检查 Hotels 组件在第一次挂载时是否会从 Context 调用 getHotelsRequest 函数。这意味着在酒店使用的 useEffect Hook 已经被测试过了。

这里测试

import React from 'react';
import { mount } from 'enzyme';
import Hotels from './Hotels';

 let useContextMock;

 beforeEach(() => {
      useContextMock = React.useContext = jest.fn();
     });

 afterEach(() => {
      useContextMock.mockReset();
     });

describe('the <Hotels /> component', () => {
    it('should handle the first mount', () => {
            const mockContext = {
                  loading: true,
                  error: '',
                  hotels: [],
                  getHotelsRequest: jest.fn(),
                }
            useContextMock.mockReturnValue(mockContext);
            const wrapper = mount(<Hotels />);

                expect(mockContext.getHotelsRequest).toHaveBeenCalled();
    });
});

第二节测试alert 加载数据

因为数据仍然在这里加载，所以我们还可以测试 Alert 组件是否正在呈现来自 Context 的加载值并显示加载消息。

- const Alert = styled.span`
+ export const Alert = styled.span`

- import Hotels from './Hotels';
+ import Hotels, { Alert } from './Hotels';

+   expect(wrapper.find(Alert).text()).toBe('Loading...');

在挂载了 Hotels 组件并获取了数据之后，上下文中的加载、错误和 hotel 的值将被更新。当加载和错误的值为 false 时，HotelItemsWrapper 组件将由 Hotels 呈现。

- const HotelItemsWrapper = styled.div`
+ export const HotelItemsWrapper = styled.div`

- import Hotels, { Alert } from './Hotels';
+ import Hotels, { Alert, HotelItemsWrapper } from './Hotels';

+  it('should render the list of hotels', () => {
+    const mockContext = {
+      loading: false,
+      error: '',
+      hotels: [{
+        id: 123,
+        title: 'Test Hotel',
+        thumbnail: 'test.jpg',
+      }],
+      getHotelsRequest: jest.fn(),
+    }
+    useContextMock.mockReturnValue(mockContext);
+    const wrapper = mount(<Hotels />);

+    expect(wrapper.find(HotelItemsWrapper).exists()).toBe(true);
+  });

会不会加载消息,使用text()

同时在理,我们还需要解决ROuter 的问题

你不应该在一个 < router > 外面使用 < Link > ，因为 Enzyme 不能呈现 Link 组件

+ import { BrowserRouter as Router } from 'react-router-dom';

-    const wrapper = mount(<Hotels />);
+    const wrapper = mount(<Router><Hotels /></Router>);

第三节 Context 的酒店数据

在 HotelItemsWrapper 组件内部有一个 map 函数，该函数迭代来自 Context 的酒店数据。

- const Title = styled.h3`
+ export const Title = styled.h3

+ import HotelItem, { Title } from './HotelItem';

+   expect(wrapper.find(HotelItem).exists()).toBe(true);
+ expect(wrapper.find(HotelItem).at(0).find(Title).text()).toBe(mockContext.hotels[0].title);