React-Native中StoryBook canvas getByText报null错误求助

问题描述 #

在React Native的StoryBook中使用canvas的getByText等getBy*系列函数时，所有尝试均返回null，触发错误：

TypeError: Expected container to be an Element, a Document or a DocumentFragment but got null.

相关代码 #

组件代码 #

export const MyButton = ({ onPress, text }) => {
  return (
    <TouchableOpacity style={styles.container} onPress={onPress} activeOpacity={0.8}>
      <Text style={styles.text}>{text}</Text>
    </TouchableOpacity>
  );
};

StoryBook配置及play函数 #

const MyButtonMeta = {
  title: 'MyButton',
  component: MyButton,

  args: {
    text: 'Hello world',
  },
  decorators: [
    (Story) => (
      <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
        <Story />
      </View>
    ),
  ],
};

export default MyButtonMeta;


export const AnotherExample = {
 
  play:async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    const header=  await canvas.getByText('Hello world')
    console.log(header)
    // await userEvent.press(header)
  }
};

控制台日志 #

LOG  [TypeError: Expected container to be an Element, a Document or a DocumentFragment but got null.]

排查及解决方法 #

• 适配StoryBook版本参数：部分React Native StoryBook版本中，play函数的参数不是canvasElement，而是直接使用canvas。可以尝试修改参数解构：

  play: async ({ canvas }) => {
    const header = await canvas.getByText('Hello world');
    console.log(header);
  }
  

• 等待组件渲染完成：play函数执行时组件可能还未挂载完成，用waitFor包裹查询操作确保元素存在：

  import { waitFor } from '@storybook/testing-library';
  
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    const header = await waitFor(() => canvas.getByText('Hello world'));
    console.log(header);
  }
  

• 检查decorator影响：当前decorator使用了flex:1的View包裹，可能导致布局渲染延迟。可以先去掉decorator测试是否正常，再逐步排查样式对渲染的影响。
• 确认依赖导入正确性：确保within、waitFor等工具是从@storybook/testing-library导入，而非web版的@testing-library/react，React Native环境与web存在差异。
• 验证组件渲染内容：在StoryBook预览界面确认组件确实显示了"Hello world"，排除props传递错误导致文本未渲染的情况。

内容的提问来源于stack exchange，提问作者marmundo