在 react native 中使用 jest 和 Storybook 快照测试时出现问题

Posted

技术标签:

【中文标题】在 react native 中使用 jest 和 Storybook 快照测试时出现问题【英文标题】:Problem using jest with storybook snapshot testing in react native 【发布时间】:2021-08-17 04:55:48 【问题描述】:

我有什么

我正在尝试在我的 react-native/typescript 应用程序中使用 jest 和 Storybook 以及 Storyshots 插件进行快照测试,但是当我尝试运行简单测试时遇到了一些问题。

根据storybook documentation 中的快照测试部分,您唯一需要做的就是创建一个包含以下内容的storybook.test.js 文件:

storybook.test.js

import initStoryshots from '@storybook/addon-storyshots';
initStoryshots();

在此之后,一切都应该按预期工作,但控制台抛出以下错误:

● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to
 import a file which Jest cannot parse, e.g.
it's not plain javascript.

    By default, if Jest sees a Babel config,
it will use that to transform your files, ign
oring "node_modules".

    Here's what you can do:
     • If you are trying to use ECMAScript Mo
dules, see https://jestjs.io/docs/en/ecmascri
pt-modules for how to enable it.
     • To have some of your "node_modules" fi
les transformed, you can specify a custom "tr
ansformIgnorePatterns" in your config.
     • If you need a custom transformation sp
ecify a "transform" option in your config.
     • If you simply want to mock your non-JS
 modules (e.g. binary assets) you can stub th
em out with the "moduleNameMapper" config opt
ion.

    You'll find more details and examples of
these config options in the docs:
    https://jestjs.io/docs/en/configuration.h
tml

    Details:

    C:\Users\myuser\Desktop\myapp\node_m
odules\react-native-swipe-gestures\index.js:3
    import React,  Component  from "react";
    ^^^^^^

    SyntaxError: Cannot use import statement
outside a module

      at Runtime.createScriptFromCode (node_m
odules/jest-runtime/build/index.js:1350:14)
      at Object.<anonymous> (node_modules/@st
orybook/react-native/dist/preview/components/
OnDeviceUI/navigation/index.js:29:53)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        11.468 s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

jest.config.js

module.exports = 
  preset: 'react-native',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
;

babel.config.js

module.exports = 
  presets: ['module:metro-react-native-babel-preset']
;

如果我从我的测试中删除 @storybook/addon-storyshots 相关的东西,一切都会正常工作,没有任何问题。所以我不知道我是否需要一些额外的配置来使用 react native 进行工作故事书/笑话快照测试。

【问题讨论】:

【参考方案1】:

够了。将react-native-swipe-gestures 添加到您的transformIgnorePatterns 中的jest.config.js

  transformIgnorePatterns: ['node_modules/(?!(react-native|@react-navigation|@react-native|react-native-swipe-gestures)/)'],

这对我有用。

【讨论】:

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息,例如引用或文档,以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

以上是关于在 react native 中使用 jest 和 Storybook 快照测试时出现问题的主要内容,如果未能解决你的问题,请参考以下文章

使用 Jest 在 React-Native 中测试组件行为(点击)

意外的导入令牌 - 使用 Jest 测试 React Native

如何在 React-Native 项目中使用 Jest 测试样式化组件?

如何使用 Jest 在本机反应中模拟“react-native-config”库的配置数据?

如何使用 Jest 在 React Native 中测试警报

React Native - JEST:没有找到 haste.hasteImplModulePath 选项中的 react-native/jest/hasteImpl.js