storybook [Bug]:不应该能够以静默形式写入 翻译结果:[Bug]:不应能以静默形式写入

d7v8vwbk  于 10个月前  发布在  其他
关注(0)|答案(4)|浏览(101)

描述bug

当表单处于静默状态时,测试考虑您可以编写并认为它是启用的,但实际上它们失败了。

重现步骤

https://stackblitz.com/edit/github-h8mbsw?file=src%2Fstories%2FCase.stories.tsx

系统信息

  1. Storybook Environment Info:
  2. System:
  3. OS: macOS 14.4.1
  4. CPU: (8) x64 Intel(R) Core(TM) i5-8279U CPU @ 2.40GHz
  5. Shell: 5.9 - /bin/zsh
  6. Binaries:
  7. Node: 18.17.0 - ~/.nvm/versions/node/v18.17.0/bin/node
  8. Yarn: 1.22.19 - ~/.nvm/versions/node/v18.17.0/bin/yarn <----- active
  9. npm: 9.6.7 - ~/.nvm/versions/node/v18.17.0/bin/npm
  10. Browsers:
  11. Chrome: 124.0.6367.201
  12. Edge: 124.0.2478.97
  13. Firefox: 125.0.3
  14. Safari: 17.4.1
  15. npmPackages:
  16. @storybook/addon-actions: 8.0.9 => 8.0.9
  17. @storybook/addon-essentials: 8.0.9 => 8.0.9
  18. @storybook/addon-interactions: 8.0.9 => 8.0.9
  19. @storybook/addon-links: 8.0.9 => 8.0.9
  20. @storybook/react: 8.0.9 => 8.0.9
  21. @storybook/react-vite: 8.0.9 => 8.0.9
  22. @storybook/test: ^8.0.9 => 8.0.9
  23. chromatic: ^11.3.0 => 11.3.0
  24. eslint-plugin-storybook: 0.8.0 => 0.8.0
  25. msw-storybook-addon: 2.0.0 => 2.0.0
  26. storybook: 8.0.9 => 8.0.9
  27. storybook-addon-pseudo-states: 3.1.0 => 3.1.0
  28. storybook-dark-mode: 4.0.1 => 4.0.1

其他上下文

  • 无响应*
gdx19jrr

gdx19jrr1#

Leaving this here in case the sandbox gets deleted

  1. import type { Meta, StoryObj } from '@storybook/react';
  2. import { within, userEvent, expect } from '@storybook/test';
  3. import { ComponentProps } from 'react';
  4. function Case(props: ComponentProps<'form'>) {
  5. return (
  6. <form {...props}>
  7. <input placeholder="not focusable" />
  8. </form>
  9. );
  10. }
  11. const meta = {
  12. title: 'Case',
  13. component: Case,
  14. parameters: {
  15. // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
  16. layout: 'fullscreen',
  17. },
  18. } satisfies Meta<typeof Case>;
  19. export default meta;
  20. type Story = StoryObj<typeof meta>;
  21. export const Enabled: Story = {
  22. play: async ({ canvasElement }) => {
  23. const canvas = within(canvasElement);
  24. const input = canvas.getByPlaceholderText('not focusable');
  25. await expect(input).toBeEnabled();
  26. await userEvent.type(input, 'can write');
  27. await expect(canvas.queryByDisplayValue('can write')).toBeInTheDocument();
  28. },
  29. };
  30. export const Disabled: Story = {
  31. args: {
  32. inert: '',
  33. },
  34. play: async ({ canvasElement }) => {
  35. const canvas = within(canvasElement);
  36. const input = canvas.getByPlaceholderText('not focusable');
  37. await expect(input).toBeEnabled();
  38. await userEvent.type(input, 'can write');
  39. },
  40. };
  41. export const RedundantTest: Story = {
  42. args: {
  43. inert: '',
  44. },
  45. play: async ({ canvasElement }) => {
  46. const canvas = within(canvasElement);
  47. const input = canvas.getByPlaceholderText('not focusable');
  48. await expect(input).toBeEnabled();
  49. await userEvent.type(input, 'can write');
  50. await expect(
  51. canvas.queryByDisplayValue('can write')
  52. ).not.toBeInTheDocument();
  53. },
  54. };
  55. export const Expected: Story = {
  56. args: {
  57. inert: '',
  58. },
  59. play: async ({ canvasElement }) => {
  60. const canvas = within(canvasElement);
  61. const input = canvas.getByPlaceholderText('not focusable');
  62. // to pass
  63. await expect(input).toBeDisabled();
  64. // to fail
  65. await userEvent.type(input, 'can write');
  66. },
  67. };
展开查看全部
qacovj5a

qacovj5a2#

看起来问题出在这里。

ffdz8vbo

ffdz8vbo3#

jsdom也有同样的问题:jsdom/jsdom#3605

ttvkxqim

ttvkxqim4#

好的,抓住了@codingedgar。看起来你已经在这里提交了它 $x_{1e0f1}x$

相关问题