Question

我试图弄清楚如何在Jest中模拟导入的属性函数

这是我的组件import random import math InputList = ['ab','cd'] PossibleUniqueCombinations = math.factorial(len("".join(InputList))-1) print (PossibleUniqueCombinations) TargetList = [] UniqueCombinationList = [] for lst in InputList: UniqueCnt = 0 FirstChar = lst[0] TheRest = list(lst[1:]) while UniqueCnt < PossibleUniqueCombinations: if InputList.index(lst) == 0: LeftList = [] else: LeftList = InputList[0:InputList.index(lst)] RightList = list(InputList[InputList.index(lst)+1:]) TargetList = LeftList + TheRest + RightList TargetStr = ''.join(TargetList) TargetStr = ''.join(random.sample(TargetStr, len(TargetStr))) ShuffledStr = FirstChar + ''.join(TargetStr) try: FndIdx = UniqueCombinationList.index(ShuffledStr) except ValueError: UniqueCombinationList.append(ShuffledStr) UniqueCnt += 1 for combo in UniqueCombinationList: print(combo)

AboutScreen.js

我在AboutScreen.test.js中的测试如下所示

import React from 'react';
import { Constants, WebBrowser } from 'expo';
import { View, Text } from 'react-native';

const AboutScreen = () => { 
return (
  <View>
    <Text testId={"t-and-c"} onPress={() => WebBrowser.openBrowserAsync('tcUrl')}>
Terms & conditions
    </Text>
  </View>
  );
};


export default AboutScreen;

我能够模拟import React from 'react'; import { shallow } from 'enzyme'; import config from '../../config'; import AboutScreen from '../AboutScreen'; import { Constants, WebBrowser } from 'expo'; const { termsAndConditionsUrl, privacyPolicyUrl } = config; jest.mock('expo', () => ({ Constants: { manifest: { version: '0.0.1', releaseChannel: 'PROD', }, WebBrowser: { openBrowserAsync: jest.fn() } }, })); it('click on terms and conditions link', () => { const mock = jest.spyOn(WebBrowser, 'openBrowserAsync'); mock.mockImplementation(() => Promise.resolve()); // above statement return 'Cannot spyOn on a primitive value; undefined given' // WebBrowser.openBrowserAsync = jest.fn(); --> This returns `WebBroser undefined const wrapper = shallow(<AboutScreen />); wrapper.find({ testId: 't-and-c' }).simulate('click'); expect(mock).lastCalledWith('abc'); // expect(WebBrowser.openBrowserAsync).toHaveBeenCalledWith('tcUrl); });，但是无法弄清楚如何模拟'Browser`对象中的函数。

Answer 1

您已经关闭。

您当前正在嘲笑WebBrowser成为Constants的属性内，因此需要像这样移出：

jest.mock('expo', () => ({
  Constants: {
    manifest: {
      version: '0.0.1',
      releaseChannel: 'PROD',
    }
  },
  WebBrowser: {
    openBrowserAsync: jest.fn()
  }
}));

另一个问题是使用simulate时shallow的工作方式。在文档的Common Gotchas部分中：

尽管名称暗示这将模拟实际事件，但.simulate()实际上将根据您提供的事件来定位组件的道具。例如，.simulate('click')实际上将获得onClick道具并调用它。

...并且由于您的组件没有onClick属性，因此调用.simulate('click')最终无济于事。

来自Airbnb开发人员的

This post建议直接调用道具，而避免使用simulate。

您可以像这样直接调用道具来调用onPress：

wrapper.find({ testId: 't-and-c' }).props().onPress();

所有的工作测试看起来像这样：

import React from 'react';
import { shallow } from 'enzyme';
import config from '../../config';
import AboutScreen from '../AboutScreen';
import { Constants, WebBrowser } from 'expo';
const { termsAndConditionsUrl, privacyPolicyUrl } = config;

jest.mock('expo', () => ({
  Constants: {
    manifest: {
      version: '0.0.1',
      releaseChannel: 'PROD',
    }
  },
  WebBrowser: {
    openBrowserAsync: jest.fn()
  }
}));

it('click on terms and conditions link', () => {
  const mock = jest.spyOn(WebBrowser, 'openBrowserAsync');
  mock.mockImplementation(() => Promise.resolve());

  const wrapper = shallow(<AboutScreen />);

  wrapper.find({ testId: 't-and-c' }).props().onPress();
  expect(mock).toHaveBeenCalledWith('tcUrl'); // Success!
});

开玩笑地模拟和监视导入的异步函数

1 个答案: