Jest 是一个流行的 JavaScript 测试框架,它被广泛用于测试前端应用程序。本文将手把手教你如何使用 Jest 测试 JavaScript 应用程序,从简单到复杂,逐步深入。
安装 Jest
首先,我们需要安装 Jest。可以使用 npm 进行安装:
npm install --save-dev jest
编写第一个测试用例
现在我们已经安装了 Jest,可以开始编写第一个测试用例了。我们将从一个简单的函数开始,这个函数将两个数字相加:
function add(a, b) { return a + b; }
我们可以编写一个测试用例来测试这个函数是否正常工作:
test('adds 1 + 2 to equal 3', () => { expect(add(1, 2)).toBe(3); });
这个测试用例使用 Jest 的 test
函数来定义一个测试。expect
函数用于断言测试的结果,toBe
函数用于比较实际结果和期望结果。这个测试用例期望 add(1, 2)
的结果为 3
。
现在我们可以运行测试用例,使用以下命令:
npx jest
如果一切正常,你应该看到以下输出:
PASS ./add.test.js ✓ adds 1 + 2 to equal 3 (5ms) Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 0 total Time: 1.195s Ran all test suites.
测试用例通过了,我们可以继续编写更多的测试用例。
测试异步代码
现在我们来测试一些异步代码。我们将编写一个函数,它将使用 setTimeout
函数来模拟异步操作,并在操作完成后调用回调函数。
function fetchData(callback) { setTimeout(() => { callback('data'); }, 1000); }
我们可以编写一个测试用例来测试这个函数是否正常工作:
test('fetchData returns data', (done) => { function callback(data) { expect(data).toBe('data'); done(); } fetchData(callback); });
这个测试用例使用了 Jest 的 done
函数来处理异步操作。我们定义了一个回调函数 callback
,它将在异步操作完成后被调用。在回调函数中,我们使用 expect
函数来断言测试结果,并调用 done
函数来通知 Jest 测试已经完成。
现在我们可以运行测试用例,使用以下命令:
npx jest
如果一切正常,你应该看到以下输出:
PASS ./fetchData.test.js ✓ fetchData returns data (1005ms) Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 0 total Time: 1.833s Ran all test suites.
测试用例通过了,我们可以继续编写更多的测试用例。
使用 Mock 函数
有时候,我们需要测试一个函数,但是它依赖于其他函数或模块,我们无法直接测试它。这时,我们可以使用 Jest 的 Mock 函数来模拟这些依赖项。
例如,我们将编写一个函数,它将调用另一个函数,并将其结果加倍:
function doubleResult() { const result = getResult(); return result * 2; }
这个函数依赖于一个名为 getResult
的函数,我们无法直接测试它。我们可以使用 Jest 的 Mock 函数来模拟这个函数:
const getResult = jest.fn(() => 42); test('doubleResult doubles the result of getResult', () => { expect(doubleResult()).toBe(84); expect(getResult).toHaveBeenCalled(); });
这个测试用例使用了 Jest 的 jest.fn
函数来创建一个 Mock 函数,它将返回固定值 42
。我们调用 doubleResult
函数,并断言结果是否为 84
。我们还使用 toHaveBeenCalled
函数来断言 getResult
函数是否被调用。
现在我们可以运行测试用例,使用以下命令:
npx jest
如果一切正常,你应该看到以下输出:
PASS ./doubleResult.test.js ✓ doubleResult doubles the result of getResult (6ms) Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 0 total Time: 0.896s Ran all test suites.
测试用例通过了,我们可以继续编写更多的测试用例。
使用 Snapshot 测试
有时候,我们需要测试一个组件或页面的渲染结果,但是手动编写测试用例太过繁琐。这时,我们可以使用 Jest 的 Snapshot 测试来自动生成测试用例。
例如,我们将编写一个组件,它将渲染一个列表:
-- -------------------- ---- ------- -------- ----------- - ------ - ---- ----------------------- -- - --- ---------------------- --- ----- -- -
我们可以使用 Jest 的 Snapshot 测试来测试这个组件:
test('List renders correctly', () => { const items = ['item 1', 'item 2', 'item 3']; const component = renderer.create(<List items={items} />); const tree = component.toJSON(); expect(tree).toMatchSnapshot(); });
这个测试用例使用了 Jest 的 renderer.create
函数来创建一个组件实例,并使用 toMatchSnapshot
函数来生成快照。第一次运行测试用例时,它将自动生成一个快照文件。下一次运行测试用例时,它将比较实际渲染结果和快照文件,并报告任何差异。
现在我们可以运行测试用例,使用以下命令:
npx jest
如果一切正常,你应该看到以下输出:
PASS ./List.test.js ✓ List renders correctly (9ms) Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 1 passed, 1 total Time: 1.371s Ran all test suites.
测试用例通过了,我们可以继续编写更多的测试用例。
结论
在本文中,我们已经学习了如何使用 Jest 测试 JavaScript 应用程序。我们从简单的函数开始,逐步深入,学习了如何测试异步代码、使用 Mock 函数和使用 Snapshot 测试。Jest 是一个非常强大的测试框架,可以帮助我们编写高质量的代码,并确保我们的代码在不断变化的环境中保持稳定。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/675e494ce1dcc5c0fa457daf