JEST抛出.finally不是函数

Question

这是我的反应成分：

import { sendAnalytics } from 'analytics';

class MyComponent extends React.Component {
    myMethod() {
        console.log('do something!');
    }

    render() {
        return (
            <Button 
                onClick={submitAnalytics({name: 'foo'}).finally(this.myMethod())} 
                dataset={{"data-id": "button"}}
            > Send Analytics
            </Button>
            }
        )
    }
}

我的测试是这样的：

import * as analytics from 'analytics';
jest.mock('analytics');

describe('Analytics', () => {
    it('Should call analytics when button is clicked', () => {
        analytics.submitAnalytics.mockResolvedValue(Promise.resolve(true));
        const tree = ReactTestRenderer.create(<MyComponent />);

        // Actual implementation of following 3 lines is slightly different.
        const button = tree.root.findByProps({"data-id": "button"});
        button.props.onClick();
        expect(analytics.submitAnalytics).toHaveBeenCalled();
    });
});

我尝试了几种不同的模拟策略，例如：

analytics.submitAnalytics.mockImplementation(() => {
    return Promise.resolve(true)
});

似乎什么都没有解决。我不断收到以下错误：

TypeError: (0 , analytics.submitAnalytics)(...).finally is not a function。

我不知道为什么。任何帮助表示赞赏。 如果需要更多上下文代码，请告诉我。

Answer 1

从

升级我的节点版本

{ "name": "test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "npx babel src -s -D -d dist && node dist/main.js", "build": "npx babel src -s -D -d dist", "dev": "nodemon --exec babel-node src/main.js" }, "author": "", "license": "ISC", "dependencies": { "axios": "^0.19.2", "body-parser": "^1.19.0", "dotenv": "^8.2.0", "ejs": "^3.0.1", "express": "^4.17.1", "express-handlebars": "^3.1.0", "express-recaptcha": "^5.0.1", "form-data": "^3.0.0", "moment": "^2.24.0", "multer": "^1.4.2", "node-fetch": "^2.6.0", "php-serialize": "^3.0.1", "request": "^2.88.2", "request-promise": "^4.2.5", "store": "^2.0.12", "streamifier": "^0.1.1", "url": "^0.11.0", "util": "^0.12.1" }, "devDependencies": { "@babel/cli": "^7.6.2", "@babel/core": "^7.6.2", "@babel/node": "^7.6.2", "@babel/plugin-transform-runtime": "^7.6.2", "@babel/preset-env": "^7.6.2", "@babel/preset-flow": "^7.0.0", "@babel/runtime": "^7.6.2", "babel-core": "^7.0.0-bridge.0", "babel-node": "0.0.1-security", "babel-polyfill": "^6.26.0" } }

到

v8.10.0

解决了此错误。

查看MDN上的浏览器兼容性图表，似乎v10.19.0之前在Node中不支持.finally（）

Answer 2

React Native为我工作，但自babel 7.4起已弃用。

相反，导入也可以正常工作：

react-native-maps

最终，我刚刚将节点版本（从8.10.2更新到了12.16.1）

Answer 3

我想通了！这是要做的事情：

analytics.submitPayload = jest.fn().mockImplementation(() => {
  return {
    finally: () => {
      return true;
    }
  };
});

我不知道这是对还是错，但是可以。请告诉我是否有更好的方法。

Answer 4

在测试之前导入@babel/polyfill也可以解决此问题

import '@babel/polyfill';

// Your tests...

Answer 5

我面临同样的挑战。 原因-Jest在Node环境中运行，并且Node版本- 10.0.0支持“ 最终”。但是我的Jenkins版本是8.x，因此，快速修复一下可以最终从代码中删除。稍后我们可以升级本地和远程服务器版本。

下面是MDN链接- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally