Я нашел этот пример Smoke Test с ReactJS и Jest, но я не могу его понять. Кто-нибудь может объяснить это мне, пожалуйста? Ну, во-первых, я не вижу разницы между «дымовыми тестами» и «модульными тестами». Я вижу, что люди говорят, что дымовые тесты поверхностны и очевидны. Но каждый модульный тест, не так ли? Я имею в виду, что каждый из них не создан для того, чтобы проверять, все ли работает так, как должно работать? Когда тест неочевиден и его можно понимать не как «дымовой тест», а как «юнит-тест»? Во-вторых, я начинаю с модульных тестов и не могу понять механизм Jest. В этом случае он создает раздел div через «document.Element('div')», а затем сравнивает его с разделом моего проекта «MyCard»? Заранее спасибо.
// MyCard.js
import React from "react";
const MyCard = () => {
const [counter, setCounter] = React.useState(0);
const handleClick = () => {
setCounter(counter++);
}
return (
<div>
<p>Counter: {counter}</p>
<button onClick = {handleClick}>Increment</button>
</div>
);
}
export default MyCard;
//MyCard.test.js
import React from "react";
import ReactDOM from "react-dom";
import MyCard from "./MyCard";
it("renders without crashing", () => {
const div = document.createElement("div");
ReactDOM.render(<MyCard />, div);
});
Попробовал пример, получилось. Но я не могу понять почему.
«Я не могу понять, почему». Какая часть вас смущает? Цель дымового теста? Почему это проходит? Почему кто-то автоматизировал это?
О, вы заставили меня понять, что мне нужно углубляться, когда я что-то спрашиваю, спасибо @Dakeyras, я тоже обдумаю свой вопрос. Ну, во-первых, я не вижу разницы между «дымовыми тестами» и «модульными тестами». Я вижу, что люди говорят, что дымовые тесты поверхностны и очевидны. Но каждый модульный тест, не так ли? Я имею в виду, что каждый из них не создан для того, чтобы проверять, все ли работает так, как должно работать? Во-вторых, я начинаю с модульных тестов и не могу понять механизм Jest. В этом случае он создает раздел div через «document.Element('div')», а затем сравнивает его с разделом моего проекта «<MyCard />»?
Почему это не сработает? Это проверка того, что компонент просто что-то делает; цитируя Википедию о дымовых испытаниях,
Например, смоук-тест может отвечать на такие основные вопросы, как «запускается ли программа?», «открывается ли пользовательский интерфейс?» или «делает ли что-нибудь нажатие главной кнопки?»
В этом случае тест отвечает на вопрос «отрисовывается ли вообще».
Итак, судя по вашему комментарию, этот вопрос состоит из двух компонентов. Чем дымовой тест отличается от модульного теста? и Что делает этот дымовой тест и почему?
Модульный тест имеет очень ограниченную область применения. Надлежащий модульный тест будет охватывать один модуль более крупной системы. Сравните это, например, с интеграционным тестом или сквозным тестом, которые имеют более широкий охват. Хорошие, тщательные модульные тесты также охватывают все важные аспекты тестируемого модуля, что может означать тестирование каждой строки и каждого условия. Написание и запуск полного набора модульных тестов может многое проверить в поведении вашего кода, но может быть неработающая программа, в которой каждый модульный тест проходит, например, из-за нарушения некоторых интеграций.
Дымовой тест, напротив, представляет собой легкую проверку работоспособности, чтобы убедиться, что что-то работает. Это не гарантирует, что она работает хорошо, или что в ней нет ошибок, или что поведение или внешний вид корректны, просто этот аспект системы не был полностью нарушен. Дымовые тесты менее эффективны, чем полный набор тестов, но они, как правило, быстрее пишутся, их легче обновлять, если код подвергается рефакторингу или изменению, и это намного лучше, чем полное отсутствие автоматического тестирования.
Может быть полезно посмотреть, что может привести к сбою дымового теста, чтобы понять, почему он полезен. В этом случае тест создает пустой элемент, а затем добавляет наш пользовательский компонент в качестве дочернего элемента. Тест проходит до тех пор, пока мы можем сделать это без ReactDOM.render()
ошибки. Итак, когда это потерпит неудачу? Проще говоря, это не работает, если наш элемент имеет недопустимый синтаксис. Допустим, мы случайно удалили закрывающий тег в HTML — это выдало бы ошибку, дымовой тест не прошел бы, и мы бы знали, что компонент нуждается в проверке.
Является ли он таким же тщательным, как надлежащий набор модульных тестов, когда мы проверяем, что счетчик работает должным образом? Нет. В то же время, это очень быстрый тест для написания, и даже если у нас есть другие модульные тесты, для отладки может быть полезно знать, проходит ли этот тест или нет. Если мы добавим еще один модульный тест, проверяющий, работает ли счетчик, и этот тест не пройден, а этот пройден, мы узнаем, что счетчик неисправен. Однако, если и этот тест не пройден, мы знаем, что проблема не в счетчике, а во всем компоненте.
Великий Дакейрас, ты убил его! Большое спасибо!
Без проблем! Если этот или другой ответ решил ваш вопрос, вы можете принять его, нажав на галочку рядом с ним, что поможет другим людям увидеть, что на этот вопрос уже был дан успешный ответ :)
Конечно, дело сделано!
Мне кажется, он делает именно то, что говорит. Отрисовывается без сбоев. Если бы он упал, предположительно, тест провалился бы из-за
ReactDOM.render
бросания. Вы можете протестировать, добавив тело функции компонента, напримерthrow new Error("Something bad happened durnig render!")
, и посмотреть, не пройдет ли тест.