跳到主要内容

使用

信息

自动模式 目前已可用,并推荐常用以代替手动触发 preview.debug()

1. 更新 package.json

{
"scripts": {
"jest-preview": "jest-preview"
}
}

你可以选择使用 npm-run-all 来同时运行 Jest 和 jest-preview

{
"scripts": {
"test:debug": "npm-run-all -p test jest-preview"
},
"devDependencies": {
"npm-run-all": "latest"
}
}

2. 运行 jest-preview 服务

# 你可以用 PORT 来自定义端口,默认为 3336
npm run jest-preview
# 或
yarn jest-preview
pnpm run jest-preview

3. 在 Jest 中预览你的 html 代码 以下代码演示了如何与 react-testing-library 一起使用

import preview from 'jest-preview';

describe('App', () => {
it('should work as expected', () => {
render(<App />);

userEvent.click(screen.getByTestId('increase'));
userEvent.click(screen.getByTestId('increase'));

// 打开 http://localhost:3336 查看预览
preview.debug();

expect(screen.getByTestId('count')).toContainHTML('2');
});
});

然后访问 http://localhost:3336 以查看预览。

Preview your jest test in the browser

如果你选择了 自动模式,只要有测试失败,Jest Preview 就会自动在浏览器中预览你的应用 UI。

describe('Demo', () => {
it('should work as expected', () => {
render(<Demo />);

userEvent.click(screen.getByTestId('increase'));
// userEvent.click(screen.getByTestId('increase'));

expect(screen.getByTestId('count')).toContainHTML('2');
});
});

Preview your jest test in the browser