From 5b603ab976ae6efb74d17e2a349c675de3cbe271 Mon Sep 17 00:00:00 2001 From: almouro Date: Thu, 11 Nov 2021 12:06:31 -0800 Subject: [PATCH] Ensure desktop plugin template tests run (#3039) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Summary: I've decided to migrate [a desktop plugin](https://github.com/bamlab/react-native-performance) to Sandy. When doing so, I decided to rise to the challenge from the [Flipper docs](https://fbflipper.com/docs/tutorial/js-custom#testing-plugin-logic): `we are going to pretend that we always write unit tests first` 😅 However, I've realized that when creating a plugin with `npx flipper-pkg init`, running `yarn jest` directly after creation actually fails. There are 3 issues solved in the different commits: 1. an absolute import seem to not be resolved, since all the other imports were relative in the file, I changed it as well 2. some dependencies are missing. They used to be included in the `flipper` dependency but when migrating to use `flipper-plugin` instead, they're not present anymore. I don't think this is an ideal fix, I would believe a dependency like a `flipper-dev-environment` including all of those would be more appropriate. So I'm open to suggestions to fix/remove of course 3. jest.config needs to be fixed to run in jsdom environment and ensure we can test the react component ## Changelog Fix: ensure desktop plugin template tests run Pull Request resolved: https://github.com/facebook/flipper/pull/3039 Test Plan: I've cloned the repo and run: ``` cd flipper/desktop/pkg yarn cd ../../.. ./flipper/desktop/pkg/bin/run init ``` I run the tests on the newly package created, but it actually still failed because of the first issue (since it still installed `flipper-plugin` from npm`) However, by adding this patch, it now runs! ```patch diff --git a/node_modules/flipper-plugin/lib/ui/data-table/DataTable.js b/node_modules/flipper-plugin/lib/ui/data-table/DataTable.js index 2e07ff5..ff3181d 100644 --- a/node_modules/flipper-plugin/lib/ui/data-table/DataTable.js +++ b/node_modules/flipper-plugin/lib/ui/data-table/DataTable.js @@ -39,7 +39,7 @@ const useAssertStableRef_1 = require("../../utils/useAssertStableRef"); const PluginContext_1 = require("../../plugin/PluginContext"); const lodash_1 = require("lodash"); const useInUnitTest_1 = require("../../utils/useInUnitTest"); -const createDataSource_1 = require("flipper-plugin/src/state/createDataSource"); +const createDataSource_1 = require("../../state/createDataSource"); function DataTable(props) { var _a, _b; const { onRowStyle, onSelect, onCopyRows, onContextMenu } = props; ``` Reviewed By: aigoncharov Differential Revision: D32358207 Pulled By: mweststrate fbshipit-source-id: 7761b4150c24dd5379a24c3c1deeb78bf3dda4ee --- .../flipper-plugin/src/ui/data-table/DataTable.tsx | 2 +- desktop/pkg/src/__tests__/runInit.node.ts | 12 +++++++++++- desktop/pkg/templates/plugin/package.json.template | 12 +++++++++++- 3 files changed, 23 insertions(+), 3 deletions(-) diff --git a/desktop/flipper-plugin/src/ui/data-table/DataTable.tsx b/desktop/flipper-plugin/src/ui/data-table/DataTable.tsx index b283f2c70..fe2e71f22 100644 --- a/desktop/flipper-plugin/src/ui/data-table/DataTable.tsx +++ b/desktop/flipper-plugin/src/ui/data-table/DataTable.tsx @@ -51,7 +51,7 @@ import {Formatter} from '../DataFormatter'; import {usePluginInstanceMaybe} from '../../plugin/PluginContext'; import {debounce} from 'lodash'; import {useInUnitTest} from '../../utils/useInUnitTest'; -import {createDataSource} from 'flipper-plugin/src/state/createDataSource'; +import {createDataSource} from '../../state/createDataSource'; interface DataTableBaseProps { columns: DataTableColumn[]; diff --git a/desktop/pkg/src/__tests__/runInit.node.ts b/desktop/pkg/src/__tests__/runInit.node.ts index bda57996c..54c79ffb2 100644 --- a/desktop/pkg/src/__tests__/runInit.node.ts +++ b/desktop/pkg/src/__tests__/runInit.node.ts @@ -80,12 +80,16 @@ test('It generates the correct files for client plugin', async () => { \\"test\\": \\"jest --no-watchman\\" }, \\"peerDependencies\\": { + \\"@emotion/styled\\": \\"latest\\", \\"flipper-plugin\\": \\"^0.0.0\\", - \\"antd\\": \\"latest\\" + \\"antd\\": \\"latest\\", + \\"react\\": \\"latest\\", + \\"react-dom\\": \\"latest\\" }, \\"devDependencies\\": { \\"@babel/preset-react\\": \\"latest\\", \\"@babel/preset-typescript\\": \\"latest\\", + \\"@emotion/styled\\": \\"latest\\", \\"@testing-library/react\\": \\"latest\\", \\"@types/jest\\": \\"latest\\", \\"@types/react\\": \\"latest\\", @@ -94,7 +98,13 @@ test('It generates the correct files for client plugin', async () => { \\"flipper-plugin\\": \\"latest\\", \\"flipper-pkg\\": \\"latest\\", \\"jest\\": \\"latest\\", + \\"jest-mock-console\\": \\"latest\\", + \\"react\\": \\"latest\\", + \\"react-dom\\": \\"latest\\", \\"typescript\\": \\"latest\\" + }, + \\"jest\\": { + \\"testEnvironment\\": \\"jsdom\\" } } ", diff --git a/desktop/pkg/templates/plugin/package.json.template b/desktop/pkg/templates/plugin/package.json.template index 56c59f906..f6db2383e 100644 --- a/desktop/pkg/templates/plugin/package.json.template +++ b/desktop/pkg/templates/plugin/package.json.template @@ -20,12 +20,16 @@ "test": "jest --no-watchman" }, "peerDependencies": { + "@emotion/styled": "latest", "flipper-plugin": "^{{flipper_version}}", - "antd": "latest" + "antd": "latest", + "react": "latest", + "react-dom": "latest" }, "devDependencies": { "@babel/preset-react": "latest", "@babel/preset-typescript": "latest", + "@emotion/styled": "latest", "@testing-library/react": "latest", "@types/jest": "latest", "@types/react": "latest", @@ -34,6 +38,12 @@ "flipper-plugin": "latest", "flipper-pkg": "latest", "jest": "latest", + "jest-mock-console": "latest", + "react": "latest", + "react-dom": "latest", "typescript": "latest" + }, + "jest": { + "testEnvironment": "jsdom" } }