Как тестировать приложения React с помощью библиотеки тестирования React и Jest

React.js
Как тестировать приложения React с помощью библиотеки тестирования React и Jest

Оригинальная ссылка:How to Start Testing Your React Apps Using the React Testing Library and Jest

Написание тестов часто считается утомительным процессом, но это навык, которым вы должны овладеть, даже если в тестах иногда нет необходимости. Тогда для большинства компаний модульное тестирование станет обязательным, и уверенность разработчиков в коде значительно повысится.С одной стороны, это также повысит уверенность компании в своих продуктах, а также заставит пользователей чувствовать себя более уверенно. вольно.

В мире React мы используемreact-testing-libraryа такжеjestИспользуйте его вместе, чтобы протестировать наши приложения React.

В этой статье я покажу вам, как протестировать ваше приложение React 8 простыми способами.

предпосылки

В этом руководстве предполагается, что у вас есть некоторый уровень понимания React, это руководство будет сосредоточено только на модульном тестировании.

Затем выполните следующую команду в терминале, чтобы клонировать проект с уже интегрированными необходимыми плагинами:

git clone https://github.com/ibrahima92/prep-react-testing-library-guide

Установите зависимости:

npm install

Или используйте пряжу:

yarn

Хорошо, это все, теперь давайте приступим к основам!

Базовые знания

В этой статье будут интенсивно использоваться некоторые ключевые элементы, и знание того, что они делают, может помочь вам быстро понять.

it 或 test: используется для описания самого теста, содержит два параметра, первый — это описание теста, а второй — функция, выполняющая тест.

expect: Указывает условие, которое должен пройти тест, он будет соответствовать полученным параметрам сmatcher Сравнивать.

matcher: Функция, которая ожидает достижения ожидаемого состояния, называемого сопоставителем.

render: метод, используемый для визуализации данного компонента.

import React from "react";
import { render } from "@testing-library/react";
import App from "./App";

it("should take a snapshot", () => {
  const { asFragment } = render(<App />);

  expect(asFragment(<App />)).toMatchSnapshot();
});

Как показано выше, мы используемitчтобы описать тест, затем используйтеrenderметод для отображения компонента приложения, а также ожиданиеasFragment(<App />)Результат сtoMatchSnapshot() этоmatcherсовпадения (поjestпредоставлены сопоставители).

Кстати,renderМетод возвращает несколько методов, которые мы можем использовать для проверки функциональности, и мы также используем деструктуризацию объекта, чтобы добраться до метода.

Итак, давайте продолжим и узнаем больше о библиотеке тестирования React в следующем разделе~.

Что такое библиотека тестирования React?

Библиотека тестирования React — очень удобное решение для тестирования компонентов React. это вreact-dom а такжеreact-dom/test-utilsВышеупомянутое предоставляет легкий и практичный API, если вы откроете официальный сайт React.инструменты для тестированияРекомендуем, вы обнаружите, что в примечании написано:

Уведомление: Мы рекомендуем использоватьReact Testing Library, что делает написание тестовых случаев для компонента таким же простым, как и его использование конечным пользователем.

Библиотека тестирования React — это библиотека тестирования DOM, что означает, что она имеет дело не напрямую с отображаемыми экземплярами компонентов React, а с элементами DOM и их поведением перед реальными пользователями.

Это отличная библиотека, которая (относительно) проста в использовании и поощряет хорошие методы тестирования. Конечно, вы также можете использовать его без Jest.

«Чем ближе ваши тесты к тому, как используется программное обеспечение, тем больше уверенности оно вам даст».

Итак, давайте начнем с этого в следующем разделе. Кстати, никаких зависимостей устанавливать не нужно, сам клонированный проект используетcreate-react-appСозданные плагины, необходимые для написания модульных тестов, были интегрированы, просто убедитесь, что вы установили зависимости.

8 примеров

1. Как создать тестовый снимок

Как следует из названия, моментальные снимки позволяют нам сохранять моментальные снимки данного компонента. Это полезно, когда вы выполняете некоторые обновления или рефакторинг компонентов и хотите зафиксировать или сравнить изменения.

Теперь давайтеApp.jsфайл для тестирования снимков.

  • App.test.js
import React from "react";
import { render, cleanup } from "@testing-library/react";
import App from "./App";

afterEach(cleanup);

it("should take a snapshot", () => {
  const { asFragment } = render(<App />);

  expect(asFragment(<App />)).toMatchSnapshot();
});

Чтобы получить снимок, мы сначала надо импортироватьrender а такжеcleanupметод. В этой статье мы будем часто использовать оба метода.

Вы, наверное, догадались,renderметод используется для рендеринга компонентов React,cleanupметод будет передан в качестве параметраafterEach, цель состоит в том, чтобы очистить все после выполнения каждого теста, чтобы избежать утечек памяти.

Далее мы можем использоватьrenderВизуализация компонента приложения и возврат из этого методаasFragment. Наконец, убедитесь, что фрагмент компонента приложения соответствует снимку.

Теперь, чтобы запустить тесты, откройте терминал и перейдите в корень проекта, затем выполните следующую команду:

yarn test

Если вы используете нпм:

npm run test

В результате будетsrcСоздать новую папку в__snapshots__и создать новый в своем каталогеApp.test.js.snapфайл следующим образом:

  • App.test.js.snap:
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`should take a snapshot 1`] = `
<DocumentFragment>
  <div class="App">
    <h1>
      Testing Updated
    </h1>
  </div>
</DocumentFragment>
`;

если ты сейчасApp.jsизменения, тест завершится ошибкой, поскольку моментальный снимок больше не будет соответствовать требованиям. Чтобы пройти, просто нажмите на клавиатуреuздоровье, чтобы обновить его. и ты будешьApp.test.js.snapимеет обновленный снимок в формате .

Теперь продолжим тестировать наши элементы.

2. Протестируйте элементы DOM

Чтобы протестировать наши элементы DOM, давайте быстро взглянемcomponents/TestElements.jsдокумент.

  • TestElements.js:
import React from "react";

const TestElements = () => {
  const [counter, setCounter] = React.useState(0);

  return (
    <>
      <h1 data-testid="counter">{counter}</h1>
      <button data-testid="button-up" onClick={() => setCounter(counter + 1)}>Up</button>
      <button
        disabled
        data-testid="button-down"
        onClick={() => setCounter(counter - 1)}
      >
        Down
      </button>
    </>
  );
};

export default TestElements;

Единственное, на что вам нужно обратить внимание, этоdata-testid. Он будет использоваться для получения этих элементов dom из тестового файла. Теперь давайте напишем модульные тесты:

Проверить, равен ли счетчик 0

  • TestElements.test.js:
import React from "react";
import { render, cleanup } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";
import TestElements from "./TestElements";

afterEach(cleanup);

it("should equal to 0", () => {
  const { getByTestId } = render(<TestElements />);
  expect(getByTestId("counter")).toHaveTextContent(0);
});

Как видите, синтаксис на самом деле очень похож на предыдущий тест на моментальные снимки. Единственное отличие состоит в том, что мы теперь используемgetByTestIdПолучите элемент dom, а затем проверьте, является ли текстовое содержимое элемента0.

Проверьте, отключена ли кнопка или включена

  • TestElements.test.js(добавьте в файл следующий код):
it("should be enabled", () => {
  const { getByTestId } = render(<TestElements />);
  expect(getByTestId("button-up")).not.toHaveAttribute("disabled");
});

it("should be disabled", () => {
  const { getByTestId } = render(<TestElements />);
  expect(getByTestId("button-down")).toBeDisabled();
});

Так же мы используемgetByTestIdЧтобы получить элемент dom, первый тест должен проверить, что у элемента кнопки нет атрибута.disabled; второй тест должен проверить, отключен ли элемент кнопки.

После сохранения и запуска тестовой команды вы обнаружите, что все тесты пройдены!

Поздравляем с успешным прохождением первого теста!

Теперь давайте узнаем, как тестировать события в следующем разделе.

3. Тестовые события

Перед написанием модульных тестов давайте посмотримcomponents/TestEvents.jsФайл распилен:

  • TestEvents.js:
import React from "react";

const TestEvents = () => {
  const [counter, setCounter] = React.useState(0);

  return (
    <>
      <h1 data-testid="counter">{counter}</h1>
      <button data-testid="button-up" onClick={() => setCounter(counter + 1)}>
        Up
      </button>
      <button data-testid="button-down" onClick={() => setCounter(counter - 1)}>
        Down
      </button>
    </>
  );
};

export default TestEvents;

Теперь давайте напишем модульные тесты для этого компонента.

Проверьте правильность увеличения и уменьшения счетчика при нажатии кнопки

  • TestEvents.test.js:
import React from "react";
import { render, cleanup, fireEvent } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";
import TestEvents from "./TestEvents";

afterEach(cleanup);

it("increments counter", () => {
  const { getByTestId } = render(<TestEvents />);

  fireEvent.click(getByTestId("button-up"));

  expect(getByTestId("counter")).toHaveTextContent("1");
});

it("decrements counter", () => {
  const { getByTestId } = render(<TestEvents />);

  fireEvent.click(getByTestId("button-down"));

  expect(getByTestId("counter")).toHaveTextContent("-1");
});

Как видите, эти два теста очень похожи, за исключением ожидаемого текстового содержимого.

Первый тест используетfireEvent.click()Запустите событие щелчка, чтобы проверить, увеличивается ли счетчик при нажатии кнопки.1.

Второй тест проверяет, уменьшается ли значение счетчика при нажатии кнопки.-1.

fireEventЕсть несколько методов, которые вы можете использовать для тестирования событий, так что не стесняйтесь читатьДокументацияЧтобы получить больше информации.

Теперь, когда мы знаем, как тестировать события, давайте перейдем к следующему разделу о том, как обрабатывать асинхронные операции.

4. Тестируйте асинхронные операции

Выполнение асинхронных операций занимает некоторое время. Это может быть HTTP-запрос, таймер и т. д.

Так же проверимcomponents/TestAsync.jsдокумент.

  • TestAsync.js:
import React from "react";

const TestAsync = () => {
  const [counter, setCounter] = React.useState(0);

  const delayCount = () =>
    setTimeout(() => {
      setCounter(counter + 1);
    }, 500);

  return (
    <>
      <h1 data-testid="counter">{counter}</h1>
      <button data-testid="button-up" onClick={delayCount}>
        Up
      </button>
      <button data-testid="button-down" onClick={() => setCounter(counter - 1)}>
        Down
      </button>
    </>
  );
};

export default TestAsync;

Здесь мы используемsetTimeout()Имитировать асинхронность.

Проверьте, увеличивается ли счетчик через 0,5 с.

  • TestAsync.test.js:
import React from "react";
import {
  render,
  cleanup,
  fireEvent,
  waitForElement,
} from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";
import TestAsync from "./TestAsync";

afterEach(cleanup);

it("increments counter after 0.5s", async () => {
  const { getByTestId, getByText } = render(<TestAsync />);

  fireEvent.click(getByTestId("button-up"));

  const counter = await waitForElement(() => getByText("1"));

  expect(counter).toHaveTextContent("1");
});

Чтобы протестировать добавочные события, мы сначала должны использоватьasync/awaitчтобы справиться с действием, потому что, как я уже говорил, для его завершения требуется некоторое время.

Поскольку мы используем новый вспомогательный методgetByText(), что то же самое, чтоgetByTestId()Аналогично, но теперь мы получаем элемент через текстовое содержимое элемента dom, а не предыдущегоtest-id.

Теперь, после нажатия кнопки, мы ждем, чтобы использоватьwaitForElement(() => getByText('1'))Увеличьте счетчик. Счетчик увеличивается до1После , теперь мы можем перейти к условию и проверить, действительно ли счетчик равен1.

Легко ли это понять? Сказав это, давайте теперь перейдем к более сложным тестам.

вы готовы?

5. Протестируйте React Redux

Если вы новичок в React Redux, эта статья может вам немного помочь. Давайте сначала посмотримcomponents/TestRedux.js Содержание.

  • TestRedux.js:
import React from "react";
import { connect } from "react-redux";

const TestRedux = ({ counter, dispatch }) => {
  const increment = () => dispatch({ type: "INCREMENT" });
  const decrement = () => dispatch({ type: "DECREMENT" });

  return (
    <>
      <h1 data-testid="counter">{counter}</h1>
      <button data-testid="button-up" onClick={increment}>
        Up
      </button>
      <button data-testid="button-down" onClick={decrement}>
        Down
      </button>
    </>
  );
};

export default connect((state) => ({ counter: state.count }))(TestRedux);

посмотри сноваstore/reducer.js:

export const initialState = {
  count: 0,
};

export 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;
  }
}

Как видите, ничего необычного — это просто базовый компонент-счетчик, который обрабатывается React Redux.

Теперь давайте напишем модульные тесты.

Проверить, равно ли начальное состояние 0

  • TestRedux.test.js:
import React from "react";
import { createStore } from "redux";
import { Provider } from "react-redux";
import { render, cleanup, fireEvent } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";
import { initialState, reducer } from "../store/reducer";
import TestRedux from "./TestRedux";

const renderWithRedux = (
  component,
  { initialState, store = createStore(reducer, initialState) } = {}
) => {
  return {
    ...render(<Provider store={store}>{component}</Provider>),
    store,
  };
};

afterEach(cleanup);

it("checks initial state is equal to 0", () => {
  const { getByTestId } = renderWithRedux(<TestRedux />);
  expect(getByTestId("counter")).toHaveTextContent("0");
});

Нам нужно что-то импортировать, чтобы протестировать React Redux. Здесь мы создаем нашу собственную вспомогательную функциюrenderWithRedux()для визуализации компонента, так как он будет использоваться несколько раз.

renderWithRedux()получить компонент для рендеринга,initialState а такжеstoreкак параметр. если нетstore, который создаст новыйstore, если не полученоinitialState илиstore, возвращается пустой объект.

Далее мы используемrender()визуализировать компонент иstore Перейти кProvider.

означает, что теперь мы можем разместить компонентTestRedux Перейти кrenderWithRedux()чтобы проверить, равен ли счетчик0.

Проверьте правильность увеличения и уменьшения счетчика.

  • TestRedux.test.js(Добавьте в файл следующий код):
it("increments the counter through redux", () => {
  const { getByTestId } = renderWithRedux(<TestRedux />, {
    initialState: { count: 5 },
  });
  fireEvent.click(getByTestId("button-up"));
  expect(getByTestId("counter")).toHaveTextContent("6");
});

it("decrements the counter through redux", () => {
  const { getByTestId } = renderWithRedux(<TestRedux />, {
    initialState: { count: 100 },
  });
  fireEvent.click(getByTestId("button-down"));
  expect(getByTestId("counter")).toHaveTextContent("99");
});

Чтобы протестировать события увеличения и уменьшения, мы будемinitialStateпередается вторым параметром вrenderWithRedux(). Теперь мы можем нажать кнопку и проверить, соответствует ли ожидаемый результат.

Теперь давайте перейдем к следующей части и представим React Context.

Далее идут React Router и Axios, вы все еще смотрите?

6. Протестируйте контекст реакции

Если вы новичок в React Context, сначала прочитайтеэта статья. Кроме того, давайте посмотрим наcomponents/TextContext.jsдокумент.

  • TextContext.js:
import React, { createContext, useContext, useState } from "react";

export const CounterContext = createContext();

const CounterProvider = () => {
  const [counter, setCounter] = useState(0);
  const increment = () => setCounter(counter + 1);
  const decrement = () => setCounter(counter - 1);

  return (
    <CounterContext.Provider value={{ counter, increment, decrement }}>
      <Counter />
    </CounterContext.Provider>
  );
};

export const Counter = () => {
  const { counter, increment, decrement } = useContext(CounterContext);
  return (
    <>
      <h1 data-testid="counter">{counter}</h1>
      <button data-testid="button-up" onClick={increment}>
        Up
      </button>
      <button data-testid="button-down" onClick={decrement}>
        Down
      </button>
    </>
  );
};

export default CounterProvider;

Теперь, когда состояние счетчика управляется через контекст React, давайте напишем модульные тесты, чтобы проверить, что он ведет себя так, как ожидалось.

Проверить, равно ли начальное состояние 0

  • TestContext.test.js:
import React from "react";
import { render, cleanup, fireEvent } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";
import CounterProvider, { CounterContext, Counter } from "./TestContext";

const renderWithContext = (component) => {
  return {
    ...render(
      <CounterProvider value={CounterContext}>{component}</CounterProvider>
    ),
  };
};

afterEach(cleanup);

it("checks if initial state is equal to 0", () => {
  const { getByTestId } = renderWithContext(<Counter />);
  expect(getByTestId("counter")).toHaveTextContent("0");
});

Как и в предыдущем разделе о React Redux, здесь мы создаем вспомогательную функцию.renderWithContext()для визуализации компонента. Но на этот раз он получает компонент только в качестве параметра. Чтобы создать новый контекст, мыCounterContextПередано Провайдеру.

Теперь мы можем проверить, равно ли начальное состояние счетчика0.

Проверьте правильность увеличения и уменьшения счетчика.

  • TestContext.test.js(Добавьте в файл следующий код):
it("increments the counter", () => {
  const { getByTestId } = renderWithContext(<Counter />);

  fireEvent.click(getByTestId("button-up"));
  expect(getByTestId("counter")).toHaveTextContent("1");
});

it("decrements the counter", () => {
  const { getByTestId } = renderWithContext(<Counter />);

  fireEvent.click(getByTestId("button-down"));
  expect(getByTestId("counter")).toHaveTextContent("-1");
});

Как вы можете видеть, здесь мы запускаем событие щелчка, чтобы проверить, что счетчик правильно увеличен до1или сокращено до-1.

Теперь мы можем перейти к следующему разделу и представить React Router.

7. Протестируйте маршрутизатор React

Если вы хотите углубиться в React Router, этостатьяМожет быть полезно для вас. Теперь давайте сначалаcomponents/TestRouter.jsдокумент.

  • TestRouter.js:
import React from "react";
import { Link, Route, Switch, useParams } from "react-router-dom";

const About = () => <h1>About page</h1>;
const Home = () => <h1>Home page</h1>;
const Contact = () => {
  const { name } = useParams();

  return <h1 data-testid="contact-name">{name}</h1>;
};

const TestRouter = () => {
  const name = "John Doe";

  return (
    <>
      <nav data-testid="navbar">
        <Link data-testid="home-link" to="/">
          Home
        </Link>
        <Link data-testid="about-link" to="/about">
          About
        </Link>
        <Link data-testid="contact-link" to={`/contact/${name}`}>
          Contact
        </Link>
      </nav>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/about:name" component={Contact} />
      </Switch>
    </>
  );
};

export default TestRouter;

Здесь у нас есть некоторые компоненты, которые мы хотим отображать при навигации по домашней странице.

Проверьте, правильно ли отображается навигация при переключении

  • TestRouter.test.js:
import React from "react";
import { Router } from "react-router-dom";
import { render, fireEvent } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";
import { createMemoryHistory } from "history";
import TestRouter from "./TestRouter";

const renderWithRouter = (component) => {
  const history = createMemoryHistory();
  return {
    ...render(<Router history={history}>{component}</Router>),
  };
};

it("should render the home page", () => {
  const { container, getByTestId } = renderWithRouter(<TestRouter />);
  const navbar = getByTestId("navbar");
  const link = getByTestId("home-link");

  expect(container.innerHTML).toMatch("Home page");
  expect(navbar).toContainElement(link);
});

Чтобы протестировать React Router, нам сначала нужна история навигации. Поэтому мы используемcreateMemoryHistory()для создания истории навигации.

Далее используем вспомогательную функциюrenderWithRouter()визуализировать компонент иhistory Перейти кRouterкомпонент. Теперь мы можем проверить, является ли страница, загруженная в начале, домашней страницей, и отобразить ее, как и ожидалось, на панели навигации.Linkкомпонент.

При нажатии на ссылку проверьте, переходит ли она на другую страницу

  • TestRouter.test.js(Добавьте в файл следующий код):
it("should navigate to the about page", () => {
  const { container, getByTestId } = renderWithRouter(<TestRouter />);

  fireEvent.click(getByTestId("about-link"));
  expect(container.innerHTML).toMatch("About page");
});

it("should navigate to the contact page with the params", () => {
  const { container, getByTestId } = renderWithRouter(<TestRouter />);

  fireEvent.click(getByTestId("contact-link"));
  expect(container.innerHTML).toMatch("John Doe");
});

Чтобы проверить, работает ли навигация, мы должны запустить событие клика по навигационной ссылке.

Для первого теста мы проверяем, что содержимое совпадает с текстом в «О странице», а для второго теста мы тестируем параметр маршрута и проверяем, что он передается правильно.

Теперь мы можем перейти к последнему разделу и научиться тестировать запросы Axios.

Мы почти закончили! Ну давай же!

8. Тестовый HTTP-запрос

Как обычно, давайте сначала посмотрим наcomponents/TextAxios.jsсодержание документа.

  • TestAxios.js:
import React from "react";
import axios from "axios";

const TestAxios = ({ url }) => {
  const [data, setData] = React.useState();

  const fetchData = async () => {
    const response = await axios.get(url);
    setData(response.data.greeting);
  };

  return (
    <>
      <button onClick={fetchData} data-testid="fetch-data">
        Load Data
      </button>
      {data ? (
        <div data-testid="show-data">{data}</div>
      ) : (
        <h1 data-testid="loading">Loading...</h1>
      )}
    </>
  );
};

export default TestAxios;

Как видите, у нас есть простой компонент с кнопкой для создания запроса. И если данные недоступны, будет отображаться сообщение о загрузке (Loading...).

Теперь давайте напишем тест.

Проверить правильность извлечения и отображения данных

  • TestAxios.test.js:
import React from "react";
import { render, waitForElement, fireEvent } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";
import axiosMock from "axios";
import TestAxios from "./TestAxios";

jest.mock("axios");

it("should display a loading text", () => {
  const { getByTestId } = render(<TestAxios />);

  expect(getByTestId("loading")).toHaveTextContent("Loading...");
});

it("should load and display the data", async () => {
  const url = "/greeting";
  const { getByTestId } = render(<TestAxios url={url} />);

  axiosMock.get.mockResolvedValueOnce({
    data: { greeting: "hello there" },
  });

  fireEvent.click(getByTestId("fetch-data"));

  const greetingData = await waitForElement(() => getByTestId("show-data"));

  expect(axiosMock.get).toHaveBeenCalledTimes(1);
  expect(axiosMock.get).toHaveBeenCalledWith(url);
  expect(greetingData).toHaveTextContent("hello there");
});

Этот тестовый пример немного отличается, потому что нам нужно обработать HTTP-запрос. Для этого мы должны использоватьjest.mock('axios')Смоделируйте запрос axios.

Теперь мы можем использоватьaxiosMockи применить егоget()метод. Наконец, мы будем использовать встроенные функции Jest.mockResolvedValueOnce()Передайте фиктивные данные в качестве параметра.

Для второго теста мы можем нажать кнопку, чтобы получить данные, поэтому нам нужно использоватьasync/awaitдля обработки асинхронных запросов. Теперь мы должны гарантировать следующее3прошли тесты:

  • HTTP-запрос выполнен правильное количество раз?
  • Был ли выполнен HTTP-запрос с URL-адресом?
  • Соответствуют ли полученные данные ожиданиям?

Для первого теста мы проверяем, отображается ли сообщение о загрузке (loading...), когда нет данных для отображения.

До сих пор мы использовали8Простой шаг для завершения тестирования приложений React.

Рекомендуемое чтение

Вы чувствуете, что начинаете сейчас? Пожалуйста, ознакомьтесь с дополнительной документацией для получения дополнительной информации. Вот некоторые рекомендуемые материалы:

официальная документация

React Testing Library docs
React Testing Library Cheatsheet
Jest DOM matchers cheatsheet
Jest Docs

Начиная

Testing with react-testing-library and Jest

Учебное пособие по автоматическому тестированию внешнего интерфейса 1 - установка конфигурации
Учебное пособие по автоматическому тестированию внешнего интерфейса
Jest tutorial 3 по автоматическому тестированию внешнего интерфейса — инструменты командной строки
Jest tutorial 4 по интерфейсному автоматизированному тестированию — асинхронное тестирование кода
Учебное пособие по автоматизированному тестированию переднего плана 5 — функция ловушки
Учебное пособие по автоматическому тестированию переднего плана 6-mock function
Учебное пособие по автоматическому тестированию переднего плана 7-таймерный тест
Учебное пособие по автоматическому тестированию внешнего интерфейса Тестирование моментальных снимков с 8 снимками

напиши в конце

React Testing Library — отличный пакет плагинов для тестирования компонентов React. Это дает нам доступ к сопоставителям jest-dom, которые мы можем использовать для более эффективного тестирования наших компонентов с использованием передовых методов, надеюсь, эта статья поможет вам.

Спасибо за прочтение!

это моеgithub/blog, если тебе поможет, ставь маленькую звездочку 🌟~

Категории