面试题：Svelte组件测试基础：Jest和Testing Library的配置

Question

在一个Svelte项目中，简述如何配置Jest和Testing Library来进行组件测试。请列出关键步骤和需要安装的相关依赖。

Answer 1

关键步骤

1. 初始化项目：如果项目尚未初始化，先通过 npm init -y 初始化 package.json 文件。
2. 安装依赖：
   • Jest：用于执行测试。
   • @testing-library/svelte：用于测试 Svelte 组件，提供了实用的函数来查询和操作组件。
   • jest-transform-svelte：允许 Jest 处理 Svelte 组件文件。
   • svelte：项目本身依赖的 Svelte 库，测试时也需要。
   • @types/jest（可选，但推荐）：为 Jest 提供类型定义，方便在 TypeScript 项目中使用。
3. 配置 Jest：在项目根目录创建 jest.config.js 文件，内容大致如下：

module.exports = {
  preset: 'jest-preset-svelte',
  moduleFileExtensions: ['js','svelte'],
  transform: {
    '^.+\\.svelte$': 'jest-transform-svelte',
    '^.+\\.js$': 'babel-jest'
  },
  testPathIgnorePatterns: ['/node_modules/']
};

4. 编写测试：在组件文件同一目录下创建 *.test.js 或 *.spec.js 文件，例如对于 MyComponent.svelte，可创建 MyComponent.test.js。使用 @testing-library/svelte 提供的 API 编写测试用例。例如：

import { render } from '@testing-library/svelte';
import MyComponent from './MyComponent.svelte';

test('renders MyComponent', () => {
  const { getByText } = render(MyComponent);
  const element = getByText('Component text');
  expect(element).toBeInTheDocument();
});

5. 运行测试：在 package.json 的 scripts 中添加 "test": "jest"，然后通过 npm test 运行测试。

相关依赖安装命令

1. 使用 npm：

   npm install --save-dev jest @testing-library/svelte jest-transform-svelte svelte @types/jest
   

2. 使用 yarn：

   yarn add -D jest @testing-library/svelte jest-transform-svelte svelte @types/jest