用 fakerjs 1 行代码搞定假数据！前端的自动化利器！

什么是 Faker

Faker 是一个非常流行的前端库，可以生成虚假但合理的数据，可用于单元测试、性能测试、构建演示、无需完整后端即可运行等场景使用。

Faker 的核心功能包括：

支持人物：生成姓名、性别、个人简介、职位等
支持位置：生成地址、邮政编码、街道名称、州 / 省和国家 / 地区
支持日期：过去、现在、将来、最近、即将等等
支持金融：创建存根账户详情、交易记录和加密地址
支持商业：生成价格、产品名称、形容词和描述。
支持黑客：支持重启 SQL 总线来绕过虚拟应用程序
支持数字和字符串：可以生成随机数和字符串
本地化：支持从超过 70 个语言环境来生成逼真的姓名、地址和电话号码

Faker 最初是用 Perl 编写，目前也支持 JavaScript、 Ruby、Java 和 Python 库版本。

目前 Faker 在 Github 通过 MIT 协议开源，有超过 14k 的 star、1k 的 fork，是一个值得关注的前端开源项目。

如何使用 Faker

首先需要安装相应的依赖：

npm install --save-dev @faker-js/faker

然后可以直接在业务代码中导入即可：

// ESM
import { faker } from "@faker-js/faker";
// CJS
const { faker } = require("@faker-js/faker");
export function createRandomUser() {
  return {
    userId: faker.string.uuid(),
    username: faker.internet.username(),
    email: faker.internet.email(),
    avatar: faker.image.avatar(),
    password: faker.internet.password(),
    birthdate: faker.date.birthdate(),
    registeredAt: faker.date.past(),
  };
}
export const users = faker.helpers.multiple(createRandomUser, {
  count: 5,
});

开发者甚至还可以直接在浏览器中使用 type="module" 从 CDN 直接加载：

<script type="module">
  import { faker } from "https://esm.sh/@faker-js/faker";
  // Caitlyn Kerluke
  const randomName = faker.person.fullName();
  // Rusty@arne.info
  const randomEmail = faker.internet.email();
  document.getElementById("name").value = randomName;
  document.getElementById("email").value = randomEmail;
</script>
<input id="name" />
<input id="email" />

同时，Faker 支持多种语言环境。主 Faker 实例使用英语语言环境，但开发者也可以导入使用其他语言环境的实例。

import { de, de_CH, Faker } from "@faker-js/faker";
export const faker = new Faker({
  locale: [de_CH, de],
});

与前端框架一起使用 Faker

由于 Vitest 和 Jest 使用的方式极其相似，主要区别在于 Vitest 需要导入测试方法，而如果要集成 Jest，只需删除该行即可。

这些框架的与 Faker 几乎能无缝集成，以下是使用 Vitest 的简单示例：

import { faker } from "@faker-js/faker/locale/en";
import { afterEach, describe, expect, it } from "vitest";
// We might want other tests to *not* be seeded. This will re-seed our faker instance after each test.
afterEach(() => {
  faker.seed();
});
describe("reverse array", () => {
  it("should reverse the array", () => {
    // Seed our faker instance with some static number.
    faker.seed(1234);
    const title = faker.person.jobTitle();
    const name = faker.person.fullName();
    const animal = faker.animal.bear();
    const array = [title, name, animal];
    expect(array.reverse()).toStrictEqual([animal, name, title]);
    // Expect our value to always match a generated snapshot.
    expect(array.reverse()).toMatchSnapshot();
  });
});

同时，有时进行种子测试会很有用，开发者可以用一个静态值作为 faker 实例的种子，这样其每次都会生成相同的随机值，从而在需要确定性的测试（例如：快照测试）场景中尤其有用。

import { faker } from "@faker-js/faker/locale/en";
import { afterEach, describe, expect, it } from "vitest";
// We might want other tests to *not* be seeded. This will re-seed our faker instance after each test.
afterEach(() => {
  faker.seed();
});
describe("reverse array", () => {
  it("should reverse the array", () => {
    // Seed our faker instance with some static number.
    faker.seed(1234);
    const title = faker.person.jobTitle();
    const name = faker.person.fullName();
    const animal = faker.animal.bear();
    const array = [title, name, animal];
    expect(array.reverse()).toStrictEqual([animal, name, title]);
    // Expect our value to always match a generated snapshot.
    expect(array.reverse()).toMatchSnapshot();
  });
});