# 任务 0：练功前的热身

Hi，你好，我是 JimmyLv 吕靖，这是你开始 前端 TDD 练习的第 0 天。（没错！作为一枚合格的程序员，我们的计数是从 0 开始的。😁）

今天我来跟你介绍第一个任务，很简单：首先，完全由自己来做一遍 FizzBuzz 这道题。

## 任务目标

如果这是你第一次接触测试驱动开发（TDD）方法，可能你需要先花一点时间学习：

1. 怎么[使用 Jest 编写单元测试](https://jestjs.io/zh-Hans/)？
2. 以及如何[使用 Testing Library 来测试前端组件](https://create-react-app.dev/docs/running-tests#option-2-react-testing-library)？
3. 然后下载脚手架代码库开始实现 FizzBuzz 计算器。

![](/files/-M1ictXvWGCZwCGPhpIJ)

## 下载脚手架代码库

**为了完成任务，我会给你一个梯子：**

1. 看懂题目，开始编码之前先花 10 分钟拆解任务，把任务清单写下来；
2. **计时**，开始编码；
3. 要求用 TDD 的方式实现：先写测试，后写代码；
4. 注意这个题目有两阶段需求，第一阶段和第二阶段完成时分别看一下**时间**。

**准备好的脚手架代码库，是其次：**

```bash
git clone https://github.com/JimmyLv/tdd-fizzbuzz.git
cd tdd-fizzbuzz

yarn install #安装依赖
yarn test #运行测试

------

 PASS  src/dojo/fizzBuzz.test.js
  Test FizzBuzz
    ✓ should return 2 given 1 + 1 (1ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.478s, estimated 1s
Ran all test suites related to changed files.

Watch Usage: Press w to show more.
```

这是一个 React [CRA](https://create-react-app.dev/) 脚手架，不用担心，只要你会写 JavaScript `function` 函数，你就会写 React。甚至于，使用 TDD 的方式，就是最好的学习方式。我相信你在学习 TDD 的同时，就能学会 React，甚至有可能一不小心就爱上了 React。

当然，我还通过 CodeSandbox 的方式作为你的快速入口：<https://codesandbox.io/s/github/JimmyLv/tdd-fizzbuzz> (可能需要科学上网)，帮助你去除设置开发环境的障碍，一键打开 Cloud IDE 即可开始编码，右边则是你的网站运行效果预览，比如：<https://tdd-fizzbuzz.jimmylv.now.sh>

{% embed url="<https://codesandbox.io/embed/github/JimmyLv/tdd-fizzbuzz/tree/master/?autoresize=1&fontsize=14&hidenavigation=1&theme=dark>" %}
CodeSandbox 代码编辑
{% endembed %}

[![Edit tdd-fizzbuzz](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/JimmyLv/tdd-fizzbuzz/tree/master/?fontsize=14\&hidenavigation=1\&theme=dark)

## 项目很容易，但是并不简单

借用诺兰电影《致命魔术》里的一句台词，

Its simple but not easy.

![](/files/-M1kLn3J4ZVCYAx6nNEG)

**你现在需要做的是反复训练，我会在群里全程陪你。**

## 本次任务的练习要求

我希望你关注以下这几个问题：

* 做完整道题用了多长时间？
* 代码质量怎么样？
* TDD 的方式顺畅吗？
* 实际做的步骤，和一开始拆分的任务是否相同？

## 额外推荐资料

[深度解读 - TDD（测试驱动开发） - 简书](https://www.jianshu.com/p/62f16cd4fef3)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://jimmylv.gitbook.io/tdd-frontend/coding/00-project-fizzbuzz/02-warm-up-before-tdd.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.