使用 Jest 测试 React 和 GraphQL 的应用最佳实践-JavaScript中文网-JavaScript教程资源分享门户

随着前端技术的发展，React 和 GraphQL 成为了越来越受欢迎的技术。但是，在开发应用的过程中，测试是必不可少的一环。本文将介绍使用 Jest 测试 React 和 GraphQL 应用的最佳实践，帮助开发者更好地进行测试。

Jest 简介

Jest 是一个由 Facebook 开发的 JavaScript 测试框架，专门用于测试 React 应用。它具有易于使用、快速执行、自动化测试和覆盖率报告等特点。此外，Jest 还支持使用 Babel、TypeScript 和 Flow 等语言进行测试，使得开发者可以使用最新的 JavaScript 技术进行测试。

React 测试

安装 Jest

首先，我们需要在项目中安装 Jest。使用以下命令：

npm install --save-dev jest

编写测试用例

在编写测试用例之前，我们需要了解一些 React 测试的基础知识。

React 组件有两种类型：无状态组件和有状态组件。无状态组件只是简单地渲染一些内容，而有状态组件则包含了一些状态和生命周期方法。在测试组件时，我们需要分别对这两种组件进行测试。

无状态组件测试

无状态组件测试非常简单。我们只需要渲染组件并检查其输出是否正确即可。

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

test('renders the correct text', () => {
  const { getByText } = render(<MyComponent text="Hello, World!" />);
  const textElement = getByText(/Hello, World!/i);
  expect(textElement).toBeInTheDocument();
});

在这个测试用例中，我们使用了 render 函数来渲染 MyComponent 组件，并使用 getByText 函数来获取包含指定文本的元素。然后，我们使用 expect 函数来断言文本元素是否存在于文档中。

有状态组件测试

有状态组件测试需要更多的工作。我们需要模拟组件的状态和生命周期方法，并检查组件的输出是否正确。

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

test('renders the correct text', () => {
  const { getByText } = render(<MyComponent />);
  const textElement = getByText(/Initial state/i);
  expect(textElement).toBeInTheDocument();

  fireEvent.click(getByText('Update state'));

  const updatedTextElement = getByText(/Updated state/i);
  expect(updatedTextElement).toBeInTheDocument();
});

在这个测试用例中，我们使用了 fireEvent 函数来模拟用户的点击事件，从而触发组件的状态更新。然后，我们使用 expect 函数来断言更新后的文本元素是否存在于文档中。

运行测试

完成测试用例的编写后，我们可以使用以下命令来运行测试：

npm test

Jest 将自动查找项目中的测试文件，并执行其中的测试用例。测试结果将显示在控制台中。

GraphQL 测试

安装依赖

在测试 GraphQL 应用之前，我们需要安装一些依赖项。使用以下命令：

npm install --save-dev graphql graphql-tag jest-graphql-mock

graphql 和 graphql-tag 是用于处理 GraphQL 请求和响应的库，jest-graphql-mock 则是用于模拟 GraphQL API 的库。

编写测试用例

在编写测试用例之前，我们需要了解一些 GraphQL 测试的基础知识。

GraphQL 有三个核心概念：查询、变更和订阅。查询用于获取数据，变更用于修改数据，订阅用于实时获取数据。在测试 GraphQL 应用时，我们需要分别对这三个概念进行测试。

查询测试

查询测试用于测试 GraphQL 查询的正确性。我们需要模拟一个 GraphQL 查询，并检查其返回的数据是否正确。

// javascriptcn.com 代码示例
import { createTestClient } from 'apollo-server-testing';
import { ApolloServer, gql } from 'apollo-server';
import { buildSchema } from 'graphql';
import { graphql } from 'graphql';
import { makeExecutableSchema } from 'graphql-tools';
import { mockServer } from 'jest-graphql-mock';

const typeDefs = gql`
  type Query {
    hello: String
  }
`;

const resolvers = {
  Query: {
    hello: () => 'Hello, World!',
  },
};

const schema = makeExecutableSchema({
  typeDefs,
  resolvers,
});

test('returns the correct text', async () => {
  const mock = mockServer(typeDefs);
  mock.query('hello', () => ({ hello: 'Hello, World!' }));

  const { data } = await mock.query(`{ hello }`);
  expect(data.hello).toEqual('Hello, World!');
});

在这个测试用例中，我们使用了 mockServer 函数来创建一个 GraphQL API 的模拟器。然后，我们使用 mock.query 函数来定义一个 hello 查询，并返回 Hello, World!。最后，我们使用 mock.query 函数来执行查询，检查其返回的数据是否正确。

变更测试

变更测试用于测试 GraphQL 变更的正确性。我们需要模拟一个 GraphQL 变更，并检查其修改的数据是否正确。

// javascriptcn.com 代码示例
import { createTestClient } from 'apollo-server-testing';
import { ApolloServer, gql } from 'apollo-server';
import { buildSchema } from 'graphql';
import { graphql } from 'graphql';
import { makeExecutableSchema } from 'graphql-tools';
import { mockServer } from 'jest-graphql-mock';

const typeDefs = gql`
  type Query {
    hello: String
  }

  type Mutation {
    updateHello(text: String!): String
  }
`;

const resolvers = {
  Query: {
    hello: () => 'Hello, World!',
  },

  Mutation: {
    updateHello: (_, { text }) => text,
  },
};

const schema = makeExecutableSchema({
  typeDefs,
  resolvers,
});

test('updates the correct text', async () => {
  const mock = mockServer(typeDefs);
  mock.mutation('updateHello', (_, { text }) => text);

  const { data } = await mock.query(`
    mutation {
      updateHello(text: "Updated text")
    }
  `);
  expect(data.updateHello).toEqual('Updated text');
});

在这个测试用例中，我们使用了 mock.mutation 函数来定义一个 updateHello 变更，并返回传入的 text。然后，我们使用 mock.query 函数来执行变更，检查其修改的数据是否正确。

运行测试

完成测试用例的编写后，我们可以使用以下命令来运行测试：

npm test

Jest 将自动查找项目中的测试文件，并执行其中的测试用例。测试结果将显示在控制台中。

总结

本文介绍了使用 Jest 测试 React 和 GraphQL 应用的最佳实践。在 React 测试中，我们需要分别测试无状态组件和有状态组件。在 GraphQL 测试中，我们需要分别测试查询、变更和订阅。使用以上技术，我们可以更好地进行应用的测试，保证应用的质量和稳定性。

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