jest-配置以及遇到的问题

Posted 2023-04-30

参考技术A

之前项目测试都是导师配的，这下扔给我一个单测，啥也没有，从配置开始。网上关于jest配置啥的资源要不没说清楚，要不数清楚了也不敢用，重点还是能查到的贼少（PS：谷歌搜索着实比百度好用个人感觉）
那就从0开始首先基础配置走起来，甩个链接，把基础配置起来： https://vue-test-utils.vuejs.org/installation/#semantic-versioning
1、基础配置： jest相关配置选项，按需取

关于babel他的功能可以看下babel官方文档： https://www.babeljs.cn/docs/index.html
好了官方给出的就这么多，然而，根本不够用
1、jest不支持ES6语法，添加预设babel/preset-env和babel/plugin-transform-runtime插件

2、可以看到项目里使用了vant插件，在babel.config.js中配置了vant，然鹅，jest也不支持，添加配置transformIgnorePatterns
在这儿找的，找起来真难

3、静态资源解析,项目中不可避免会引入CSS和图片等静态资源，jest仍然解析不了，mock掉。疯了，jest咋啥也解析不了，配置个东西都找好久
不明白看这里，是个好东西
根目录下建个 mock 文件夹

以上就是我踩过的坑，千辛万苦找来的配置，最后来个完整的

估计还没完，继续踩坑之路

我在设置我的 jest 配置时遇到问题 react native 无法导入组件

【中文标题】我在设置我的 jest 配置时遇到问题 react native 无法导入组件

【英文标题】：I'm having issues setting up my jest config react native Cannot Import Components

【发布时间】：2021-04-15 21:31:34

【问题描述】：

我遇到了与 babel configs 或 package.json 文件相关的问题...总之我无法从测试文件外部导入任何组件

这是错误：

 E:\.......\src\components\ButtonInstance.jsx:1
    ("Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest)import React from 'react';
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      1 | import React from 'react';
      2 | import  render, fireEvent  from '@testing-library/react-native';
    > 3 | import ButtonInstance from '../src/components/ButtonInstance';
        | ^

  at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
  at Object.<anonymous> (__tests__/index.test.js:3:1)

这是我的测试文件：

import React from 'react';
import  render, fireEvent  from '@testing-library/react-native';
import ButtonInstance from '../example/src/ButtonInstance';

test('Button', () => 
  const onPressMock = jest.fn();
  const  getByText  = render(<ButtonInstance onPress=onPressMock />);
  fireEvent.press(getByText('Press me'));
  expect(onPressMock).toHaveBeenCalledTimes(1);
);

这是我的按钮实例组件

import React from 'react';
import  Text, TouchableHighlight  from 'react-native';

export default function ButtonInstance(onPress) 
  return (
    <TouchableHighlight onPress=onPress>
      <Text>Press me</Text>
    </TouchableHighlight>
  );

package.json 文件

  "name": "components-example",
  "description": "Example app",
  "version": "0.0.1",
  "private": true,
  "scripts": 
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start"
  ,
  "dependencies": 
    "@iconscout/react-native-unicons": "^1.0.3",
    "react": "16.13.1",
    "react-native": "0.63.4",
    "react-native-svg": "^9.5.3",
    "react-native-svg-transformer": "^0.14.3"
  ,
  "devDependencies": 
    "@babel/core": "^7.12.10",
    "@babel/runtime": "^7.12.5",
    "babel-plugin-module-resolver": "^4.0.0",
    "metro-react-native-babel-preset": "^0.64.0"
  

最后一个文件 babel.config.js

module.exports = 
  presets: [
    '@babel/preset-flow',
    '@babel/preset-react',
    [
      '@babel/preset-env',
      
        targets: 
          node: '10',
        ,
        bugfixes: true,
      ,
    ],
  ],
  plugins: ['@babel/plugin-proposal-class-properties'],
;

文件夹结构

|__ __tests__
         |__ index.test.js

|__ node_modules

|__ src
    |__ components
             |__ ButtonInstance.jsx

|__ babel.config.js

|__ package.json

【参考方案1】：

我已经解决了这个与 babel 配置有关的问题，您可以将这些文件添加到您的应用程序中，这是新的 babel 工作配置文件（也许它可以帮助某人）：

babel.config.js

module.exports = (api) => 
  api.cache(true);

  return 
    env: 
      development: 
        plugins: [
          [
            'module-resolver',
            
              root: ['./src'],
              extensions: ['.js', '.jsx'],
            ,
          ],
        ],
      ,
    ,
    presets: [['@babel/preset-env',  targets:  node: 'current'  ]],
  ;
;

还有开玩笑的配置文件：

jest.config.js

module.exports = 
  preset: 'react-native',
  moduleFileExtensions: ['js', 'jsx', 'json', 'svg'],
  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(js|ts)x?$',
  transform: 
    '^.+\\.jsx?$': '<rootDir>/node_modules/react-native/jest/preprocessor.js',
    '^.+\\.svg$': 'jest-svg-transformer',
  ,
  testPathIgnorePatterns: ['\\.snap$', '<rootDir>/node_modules/'],
  cacheDirectory: '.jest/cache',
  transformIgnorePatterns: [
    'node_modules/(?!(react-native|react-navigation|react-navigation-tabs|react-navigation-redux-helpers|react-native-safari-view|react-native-linear-gradient|react-native-blur|react-native-animatable|react-native-wkwebview-reborn|react-native-safe-area-view|react-native-popup-menu|redux-persist)/)',
  ],
;