复制步骤

设置

Bash mkdir example && cd example && mkdir src && touch jest.config.js && pnpm init && pnpm i @jest/globals @testing-library/svelte jest jest-environment-jsdom svelte svelte-jester -D && cd src && touch Example.test.js && touch Example.svelte && cd ..

添加到package.json

{
  "type": "module",
  "scripts": {
    "test": "NODE_OPTIONS=--experimental-vm-modules pnpm jest"
  }
}

字符串

jest.js.js

/** @type { import('jest').Config } */
const config = { // https://jestjs.io/docs/configuration
  clearMocks: true, // Automatically clear mock calls, instances, contexts and results before every test
  collectCoverage: true, // Indicates whether the coverage information should be collected while executing the test
  coverageDirectory: 'coverage', // The directory where Jest should output its coverage files
  coverageProvider: 'v8', // Indicates which provider should be used to instrument code for coverage
  injectGlobals: false, // Insert Jest's globals (expect, test, describe, beforeEach etc.) into the global environment. If you set this to false, you should import from @jest/globals
  testEnvironment: 'jest-environment-jsdom', // The test environment that will be used for testing. The default environment in Jest is a Node.js environment. If you are building a web app, you can use a browser-like environment via 'jest-environment-jsdom'
  moduleFileExtensions: ['js', 'svelte'], // An array of file extensions your modules use
  extensionsToTreatAsEsm: ['.svelte'], // If you have files that are not `.js` and `.cjs` that should run with native ESM, you need to specify their file extension here
  transform: { '^.+\\.svelte$': 'svelte-jester' }, // https://www.npmjs.com/package/svelte-jester
}

export default config

型

示例.svelte

<script>
  let value

  function setValue (e) {
    value = e.target.value
  }
</script>

<textarea on:input={ setValue }></textarea>
{ #if value }
  { value }
{ /if }

型

Example.test.js

import Example from './Example.svelte'
import { describe, test, expect } from '@jest/globals'
import { render, fireEvent, screen } from '@testing-library/svelte'

describe('Example.svelte', () => {
  test('works', async () => {
    const value = 'hello world'

    expect(screen.queryByText(value)).toBeFalsy() // pre render component => so expect no value in dom

    const { container } = render(Example) // render component
    const textarea = container.querySelector('textarea')
    expect(screen.queryByText(value)).toBeFalsy() // expect no value in dom

    await fireEvent.input(textarea, { target: { value } }) // add value to textarea
    expect(screen.queryByText(value)).toBeTruthy() // expect value in dom is visible

    await fireEvent.input(textarea, { target: { value: '' } }) // remove value from textarea
    expect(screen.queryByText(value)).toBeFalsy() // expect value in dom is removed
  })
})

型

测试结果

• 所有测试都通过了
• 未覆盖的行#s是11，这是Example.svelte => { #if value }中的此行

PASS  src/Example.test.js
  Example.svelte
    ✓ works (26 ms)

----------------|---------|----------|---------|---------|-------------------
File            | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------------|---------|----------|---------|---------|-------------------
All files       |     100 |        0 |     100 |     100 |                   
 Example.svelte |     100 |        0 |     100 |     100 | 11                
----------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.113 s

型

请问11号线怎么测！