![](/img/trans.png)
[英]How to access the variable of a component constructor within unit tests with React-Native and Jest / Enzyme?
[英]How to simulate an event on a unit test with Jest, Enzyme for React-Native
我正在试图弄清楚如何在React-Native应用程序中使用Jest测试“onPress”事件,这样我就可以确保调用正确的函数。
我浏览了文档和Google,但在React-Native中找不到它的解决方案。
这是我发现的应该用于enzyme
React-Native:
const mockFunc = jest.fn();
const component = mount(<MyComponent onPress={mockFunc} />);
component.simulate('press');
expect(mockFunc).toHaveBeenCalled();
但这不起作用。 好像mount
不起作用,我得到这个输出:
ReferenceError:未定义文档
我尝试使用shallow
但是当我查看函数的输出时, TouchableOpacity
没有得到渲染......而你已经猜到了,它也无法正常工作。 不知道该怎么办。
有没有人找到一种方法来测试React-Native上的事件?
谢谢
酶不支持React-Native,因为它的呈现方式不同而且不使用DOM。 这就是为什么你得到错误ReferenceError: document is not defined
。 您可以查看此问题以获取更多信息。 React团队目前正在使用react-test-renderer
的.find()
方法来模拟对组件的操作。 然后它应该适用于React / React-native而不需要DOM环境。
你可以做一个hack(这就是我们在公司里所做的),它正在渲染一个自定义组件,它扩展了TouchableOpacity
并映射onClick
来调用onPress
。 像这样的东西:
const mockPressable = (name) => {
const RealComponent = require.requireActual(name);
class Component extends RealComponent {
render() {
return React.createElement(
RealComponent.displayName || RealComponent.name,
{ ...this.props, onClick: this.props.onPress },
this.props.children
);
}
}
return Component;
};
jest.mock('TouchableOpacity', () => mockPressable('TouchableOpacity'));
在测试代码中,您调用component.simulate('click')
。
这是一个黑客,我不确定这样做的后果是什么,但它对我们的用例有效。
我能够像你在React Native中的问题中所描述的那样运行测试。 这是我的配置:
的package.json
"scripts": {
...
"test": "node_modules/jest/bin/jest.js",
}
"devDependencies": {
...
"enzyme": "^3.1.0",
"enzyme-adapter-react-16": "^1.0.1",
"enzyme-to-json": "^3.1.2",
"jest": "^21.2.1",
"jest-enzyme": "^4.0.0",
"jest-expo": "~21.0.0",
}
"jest": {
"preset": "jest-expo",
"setupFiles": [
"./test/jestSetup.js"
],
"snapshotSerializers": [
"./node_modules/enzyme-to-json/serializer"
]
}
测试/ jestSetup.js
import { configure, shallow, render, mount } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
configure( { adapter: new Adapter() } )
// enzyme
global.shallow = shallow
global.render = render
global.mount = mount
示例组件:
import React from 'react'
import { Button } from 'react-native'
const CancelButton = ( props ) =>
<Button
{ ...props }
onPress={ () => { props.navigation.goBack() } }
title="Cancel"
/>
export { CancelButton }
示例测试
import React from 'react'
import { CancelButton } from '../CancelButton'
test( 'onPress', () => {
const goBackFunc = jest.fn()
const navigation = {
goBack: goBackFunc,
}
const component = shallow(
<CancelButton
navigation={ navigation }
/>
)
component.simulate( 'press' )
expect( goBackFunc ).toHaveBeenCalled()
} )
.babelrc
{
"presets": ["babel-preset-expo"],
"env": {
"development": {
"plugins": ["transform-react-jsx-source"]
}
}
}
你应该使用shallow
,然后调用.dive()
const mockFunc = jest.fn();
const component = shallow(<MyComponent onPress={mockFunc} />);
component.dive().simulate('press');
expect(mockFunc).toHaveBeenCalled();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.