# 任务 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 计算器。

![](https://2897586075-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LquCgGNObzQ8HY5Og1P%2F-M1icsl1439tpJGHvvdT%2F-M1ictXvWGCZwCGPhpIJ%2Ftdd-cycle.jpg?generation=1583477923984406\&alt=media)

## 下载脚手架代码库

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

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.

![](https://2897586075-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LquCgGNObzQ8HY5Og1P%2F-M1kLkaqhDjSaKiTLqNi%2F-M1kLn3J4ZVCYAx6nNEG%2Fnot-easy.jpg?generation=1583506741240872\&alt=media)

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

## 本次任务的练习要求

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

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

## 额外推荐资料

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