使用 Jest 和 Enzyme 测试 React / Redux 应用程序 - 第 2 部分:测试 React 组件

这是测试React / Redux应用程序的4部分系列中使用Jest和Enzyme进行测试的强大测试解决方案的第2部分,在本部分中,我们将涵盖如何测试React组件的一些简单示例。

系列

当涉及到测试 React 组件时,事情比测试常规 JavaScript 函数要多一些。好消息是,您仍然只是测试您的组件的公共接口。

如果你阅读并遵循这个系列的 ** 部分 1** 还有更好的消息. 你已经安装了 Jest 和 Enzyme 并安装了. 这些两个库结合了大量测试 React 组件的痛苦。

何以进口

 1[label __tests__/components/GatorMenu.test.js]
 2import React from 'react';
 3import { shallow } from 'enzyme';
 4import toJson from 'enzyme-to-json';
 5import configureStore from 'redux-mock-store'; // Smart components
 6
 7// Component to be tested
 8import GatorMenu from '../../components/GatorMenu';
 9
10...

<$>[注]从酶的 shallow() 方法将当前节点渲染,并返回周围的浅包裹,这允许您对单元测试保持忠诚,只测试组件,而不是对儿童进行主张。

<$>[注]从酶到Json的 toJson() 方法将 Enzyme 包装转换为与 Jest snapshot 测试兼容的格式。

<$>[注] redux-mock-store 的 configureStore() 方法用于帮助嘲笑与您的 Redux 商店的互动。

测试你的组件

 1[label __tests__/components/GatorMenu.test.js]
 2...
 3
 4describe('<GatorMenu />', () => {
 5  describe('render()', () => {
 6    test('renders the component', () => {
 7      const wrapper = shallow(<GatorMenu />);
 8      const component = wrapper.dive();
 9
10      expect(toJson(component)).toMatchSnapshot();
11    });
12  });
13});
14
15...

<$>[注] dive()方法返回当前包装器的非DOM子女。如果您的组件将另一个组件包装成某种类似的DIV元素,而您对测试感兴趣的是该内部组件,这将变得有用。

模拟事件

以下是模拟在渲染元件上的点击事件的一个示例. 我们使用平面渲染元件的查找方法来找到一个元素,然后将返回元件上的模拟方法称为字符串:

 1[label __tests__/components/GatorButton.test.js]
 2...
 3
 4describe('<GatorButton />', () => {
 5  describe('onClick()', () => {
 6    test('successfully calls the onClick handler', () => {
 7      const mockOnClick = jest.fn();
 8      const wrapper = shallow(
 9        <GatorButton onClick={mockOnClick} label="Eat Food" />
10      );
11      const component = wrapper.dive();
12
13      component.find('button').simulate('click');
14
15      expect(mockOnClick.mock.calls.length).toEqual(1);
16    });
17  });
18});
19
20...

<$>[注] jest.fn()方法允许您轻松地嘲笑和监视函数。

智能组件测试

我建议通过涵盖您的行动和减量剂的测试来测试您与 Redux 商店的互动。 尝试并将您的组件测试集中在被渲染的内容和客户端行为上。

 1[label __tests__/components/GatorAvatar.test.js]
 2import { Avatar } from 'react-native-elements';
 3
 4...
 5
 6const mockStore = configureStore();
 7const initialState = {
 8  selectReducer: {
 9    selectedAvatar: 0,
10  },
11  avatars: [
12    {
13      name: 'Green Gator',
14      image: 'https://cdn.alligator.io/images/avatars/green-gator.jpg',
15    },
16    {
17      name: 'Yellow Gator',
18      image: 'https://cdn.alligator.io/images/avatars/yellow-gator.jpg',
19    },
20    {
21      name: 'Blue Gator',
22      image: 'https://cdn.alligator.io/images/avatars/blue-gator.jpg',
23    },
24  ],
25};
26const store = mockStore(initialState);
27
28describe('<GatorAvatar />', () => {
29  test('dispatches event to show the avatar selection list', () => {
30    const wrapper = shallow(<GatorAvatar store={store} />);
31    const component = wrapper.dive();
32
33    component.find(Avatar).props().onPress();
34
35    expect(store.getActions()).toMatchSnapshot();
36  });
37});
38
39...

正如你所看到的,我们可以通过在一个元素上调用props()来访问组件的代理。

奖金提示!

在 Jest 之前,许多单元测试都是用 MochaJasmine编写的。你可以很容易地将这些测试转移到 Jest,特别是如果你正在使用声明的「expect()」味道。

什么是下一步?

在本系列的第1部分中,我向您展示了如何安装和设置Jest和Enzyme。现在在第3部分中,我们将继续测试Redux操作。我们将在第4部分结束,在那里我将向您展示如何测试Redux减速器。

Published At
Categories with 技术
Tagged with
comments powered by Disqus