Ensure desktop plugin template tests run (#3039)

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
This commit is contained in:
almouro
2021-11-11 12:06:31 -08:00
committed by Facebook GitHub Bot
parent 6bf3a4ff4c
commit 5b603ab976
3 changed files with 23 additions and 3 deletions

View File

@@ -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<T = any> {
columns: DataTableColumn<T>[];

View File

@@ -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\\"
}
}
",

View File

@@ -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"
}
}