Question

尝试测试按钮组件时，我一直收到此错误。我在这里和那里更改了Jest的配置设置，但没有任何效果，有人可以告诉我答案，这样我就可以停止拉头发了吗？

我正在使用expo演示应用程序，问题似乎出在它试图在导航按钮上呈现的字体之内，Jest / React无法理解。

失败：失败 tests /Components/NavigationButton.test.js ●测试套件无法运行

C:\..\node_modules\@expo\vector-icons\Zocial.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Zocial from './build/Zocial';
                                                                                                ^^^^^^

SyntaxError: Unexpected identifier

  at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
  at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
  at Object.<anonymous> (node_modules/react-native-elements/src/helpers/getIconType.js:1:1)

NavigationButton.js：

import React from "react";
import { StyleSheet } from "react-native";
import { Button } from "react-native-elements";
import Icon from "react-native-vector-icons/FontAwesome";
import { withNavigation } from 'react-navigation';



const NavigationButton =(props) => {
    return (
        <Button data-test="nav_button"
        icon={<Icon name={props.icon} size={30} color="white" style={styles.iconStyle} />}
        raised
        color="white"
        buttonStyle={styles.button}
        title={props.title}onPress={() => props.navigation.navigate(props.navName)}
    />
    );
};

const styles = StyleSheet.create({
    button: {
        minWidth:150,
        alignSelf:'center',
    },
    iconStyle:{
        marginHorizontal:10
    }
});

export default withNavigation(NavigationButton);

NavigationButton.test.js：

/**
* @format
*/

import 'react-native';
import React from 'react';
import { shallow } from 'enzyme';
import { findByTestAtt } from '../../Utils/test_utils';
import NavigationButton from '../../src/Components/NavigationButton'


// Note: this is just for use with Jest snapshot testing
// and comes packaged with react-native init project.
// You do not need this if using Enzyme 'toMatchSnapshot' etc.
import renderer from 'react-test-renderer';

// setup for shallow rendering component, saves having to do it in every test in this file
const  setup = (props = {}) => {
 const component = shallow(<NavigationButton {...props} />);
 return component;
};


describe('NavigationButton tests: ', () => {

let component;
beforeEach(() => {
 component = setup();
});


it('Button renders correctly: ', () => {
  console.log(component.debug());
  const wrapper = findByTestAtt(component, 'nav_button');
  expect(wrapper.length).toBe(1);
});



});

Answer 1

使用jest-expo预设为我解决了这个问题。该文档对此进行了很好的解释：https://www.npmjs.com/package/jest-expo。问题似乎是import关键字没有被转换，我不知道为什么，但是在这里出现了一个问题：https://github.com/expo/expo/issues/5296

Jest-意外标识符-组件测试w Jest react-native

1 个答案: