测试 React 应用时 Jest 的 3 种模式-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，测试是不可避免的一步。Jest 是一个流行的 JavaScript 测试库，它对 React 应用的测试也有很好的支持。而 Jest 有三种测试模式，分别是单元测试、集成测试和端到端测试。本文将会详细介绍这三种模式，并提供相应的示例代码。

单元测试

单元测试是指对软件中的最小可测试单元进行测试。在 React 中，最小的可测试单元是组件，因此 React 中的单元测试主要是针对组件进行的。在 Jest 中，单元测试使用 test() 或 it() 函数来编写。

一个简单的 React 组件可以这样写：

// javascriptcn.com 代码示例
import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

export default App;

对于上述组件，我们可以使用 Jest 编写以下的单元测试：

// javascriptcn.com 代码示例
import React from 'react';
import { render } from '@testing-library/react';
import App from '../App';

test('renders learn react link', () => {
  const { getByText } = render(<App />);
  const linkElement = getByText(/hello, world/i);
  expect(linkElement).toBeInTheDocument();
});

上述测试代码使用了 Jest 提供的 render() 函数来将组件渲染到 virtual DOM 中，之后使用 getByText() 函数来获取组件中指定的文本。最后使用 expect() 函数来判断是否满足指定的条件。

集成测试

集成测试是指测试不同模块之间的协作。在 React 中，集成测试主要是针对多个组件之间的协作，例如父组件和子组件之间的通信。在 Jest 中，可以使用 mount() 函数来实现集成测试。

例如，对于一个由一个父组件和两个子组件组成的 React 应用，可以使用以下代码进行集成测试：

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

test('should render App component correctly', () => {
  const wrapper = mount(<App />);
  expect(wrapper.state('isVisible')).toEqual(true);

  wrapper.find('#toggle-button').simulate('click');
  expect(wrapper.state('isVisible')).toEqual(false);

  expect(wrapper.find('Child1').prop('isVisible')).toEqual(false);
  expect(wrapper.find('Child2').prop('isVisible')).toEqual(false);
});

上述代码使用了 Enzyme 库中的 mount() 函数，将组件渲染为实际的 DOM。之后使用 find() 函数来查找指定的子组件，使用 simulate() 函数来模拟用户交互。最后使用 prop() 函数来获取组件的属性并判断是否满足指定的条件。

端到端测试

端到端测试是指测试整个应用在真实环境下的行为，并且涵盖了多种场景。在 React 中，可以使用 Cypress 来进行端到端测试。Cypress 是一个流行的端到端测试工具，它可以模拟浏览器交互并完全控制整个测试过程。

例如，可以使用 Cypress 编写以下的端到端测试：

// javascriptcn.com 代码示例
describe('Testing App', () => {
  it('opens the app home page and checks if the button is visible', () => {
    cy.visit('/');
    cy.get('#toggle-button').should('be.visible');
  });

  it('changes the app state on button click', () => {
    cy.visit('/');
    cy.get('#toggle-button').click();
    cy.get('#toggle-button').should('not.be.visible');
  });
});

上述代码使用 Cypress 的 visit() 函数来打开页面并模拟用户交互。使用 get() 函数来获取指定的 DOM 元素，使用 should() 函数来判断是否满足指定的条件。最后使用 not.be.visible 来判断指定的 DOM 元素是否不可见。

总结

Jest 提供了三种测试模式：单元测试、集成测试和端到端测试，用于测试 React 应用的不同场景。不同的测试模式适用于不同的测试需求，开发者应该根据实际需求选择合适的测试模式来进行测试。

示例代码

单元测试

// javascriptcn.com 代码示例
import React from 'react';
import { render } from '@testing-library/react';
import App from '../App';

test('renders learn react link', () => {
  const { getByText } = render(<App />);
  const linkElement = getByText(/hello, world/i);
  expect(linkElement).toBeInTheDocument();
});

集成测试

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

test('should render App component correctly', () => {
  const wrapper = mount(<App />);
  expect(wrapper.state('isVisible')).toEqual(true);

  wrapper.find('#toggle-button').simulate('click');
  expect(wrapper.state('isVisible')).toEqual(false);

  expect(wrapper.find('Child1').prop('isVisible')).toEqual(false);
  expect(wrapper.find('Child2').prop('isVisible')).toEqual(false);
});

端到端测试

// javascriptcn.com 代码示例
describe('Testing App', () => {
  it('opens the app home page and checks if the button is visible', () => {
    cy.visit('/');
    cy.get('#toggle-button').should('be.visible');
  });

  it('changes the app state on button click', () => {
    cy.visit('/');
    cy.get('#toggle-button').click();
    cy.get('#toggle-button').should('not.be.visible');
  });
});

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