Jest 测试 React 的组件（下）-JavaScript中文网-JavaScript教程资源分享门户

在前面的一篇文章中，我们介绍了如何使用 Jest 测试 React 组件的基本知识和技巧。在本篇文章中，我们将进一步探讨 Jest 的高级特性，以及如何利用这些特性来测试 React 组件的更多方面。

测试异步代码

在 React 组件中，我们经常需要处理异步操作，例如通过 AJAX 调用从服务器获取数据。在这种情况下，我们需要确保组件在收到数据后正确地更新状态和渲染视图。为了测试这种情况，我们需要使用 Jest 的异步测试功能。

在 Jest 中，我们可以使用 test 函数的第二个参数来指定一个 done 回调函数。当测试完成时，我们可以调用 done 回调函数来通知 Jest 测试已经完成。例如，以下代码测试了一个异步函数 fetchData，该函数从服务器获取数据并将其设置为组件的状态：

// javascriptcn.com 代码示例
import React from 'react';
import { shallow } from 'enzyme';

class MyComponent extends React.Component {
  state = {
    data: null
  };

  async fetchData() {
    const response = await fetch('/api/data');
    const data = await response.json();
    this.setState({ data });
  }

  render() {
    const { data } = this.state;
    return <div>{data ? data.message : 'Loading...'}</div>;
  }
}

describe('MyComponent', () => {
  it('fetches data from server and renders it', (done) => {
    const component = shallow(<MyComponent />);
    component.instance().fetchData().then(() => {
      component.update();
      expect(component.text()).toContain('Hello, World!');
      done();
    });
  });
});

在上面的代码中，我们使用 shallow 函数来创建一个组件实例，然后调用其 fetchData 方法来获取数据。在数据加载完成后，我们调用 component.update() 方法更新组件的状态和视图。最后，我们使用 expect 函数来检查组件是否正确地渲染了数据，并调用 done 回调函数来通知 Jest 测试已经完成。

模拟用户交互

在 React 组件中，我们经常需要处理用户交互，例如点击按钮、输入文本等。为了测试这种情况，我们需要使用 Jest 的模拟事件功能。

在 Jest 中，我们可以使用 simulate 函数来模拟用户事件。例如，以下代码测试了一个输入框组件 TextInput，该组件在用户输入时更新状态并触发 onChange 回调函数：

// javascriptcn.com 代码示例
import React from 'react';
import { mount } from 'enzyme';

class TextInput extends React.Component {
  state = {
    value: ''
  };

  handleChange = (event) => {
    this.setState({ value: event.target.value });
    this.props.onChange(event.target.value);
  };

  render() {
    return <input type="text" value={this.state.value} onChange={this.handleChange} />;
  }
}

describe('TextInput', () => {
  it('updates state and calls onChange callback when user types', () => {
    const onChange = jest.fn();
    const component = mount(<TextInput onChange={onChange} />);
    const input = component.find('input');
    input.simulate('change', { target: { value: 'Hello, World!' } });
    expect(component.state('value')).toBe('Hello, World!');
    expect(onChange).toHaveBeenCalledWith('Hello, World!');
  });
});

在上面的代码中，我们使用 mount 函数来创建一个组件实例，并将一个回调函数 onChange 作为属性传递给组件。然后，我们使用 find 函数来查找输入框元素，使用 simulate 函数来模拟用户输入事件，并检查组件状态和回调函数是否正确。注意，我们使用了 Jest 的 jest.fn() 函数来创建一个模拟函数，以便在测试中检查回调函数是否被调用。

测试 Redux 集成

在 React 应用中，我们经常使用 Redux 来管理应用状态。为了测试 Redux 集成，我们需要使用 Jest 的模拟 Redux Store 功能。

在 Jest 中，我们可以使用 redux-mock-store 包来创建一个模拟 Redux Store。例如，以下代码测试了一个 Redux 集成组件 Counter，该组件显示一个计数器，并使用 Redux 存储计数器的值：

// javascriptcn.com 代码示例
import React from 'react';
import { shallow } from 'enzyme';
import configureMockStore from 'redux-mock-store';
import { Provider } from 'react-redux';

const mockStore = configureMockStore();

const initialState = { count: 0 };

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

class Counter extends React.Component {
  handleClick = () => {
    this.props.dispatch({ type: 'INCREMENT' });
  };

  render() {
    const { count } = this.props;
    return (
      <div>
        <span>{count}</span>
        <button onClick={this.handleClick}>+</button>
      </div>
    );
  }
}

describe('Counter', () => {
  it('renders count from store and dispatches INCREMENT action', () => {
    const store = mockStore(initialState);
    const component = shallow(
      <Provider store={store}>
        <Counter />
      </Provider>
    );
    expect(component.html()).toContain('<span>0</span>');
    component.find('button').simulate('click');
    expect(store.getActions()).toEqual([{ type: 'INCREMENT' }]);
  });
});

在上面的代码中，我们使用 configureMockStore 函数来创建一个模拟 Redux Store，然后将其传递给 Provider 组件，以便将其注入到应用中。然后，我们使用 shallow 函数来创建一个 Counter 组件实例，并使用 simulate 函数来模拟用户点击事件。最后，我们使用 getActions 函数来检查 Redux Store 是否收到了正确的 Action。

总结

在本文中，我们介绍了 Jest 的高级特性，包括测试异步代码、模拟用户交互和测试 Redux 集成。这些技术可以帮助我们更全面地测试 React 组件，并确保其正确性和可靠性。希望本文对您有所帮助，祝您测试愉快！

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/656bfa00d2f5e1655d45175c