5b603ab976
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
50 lines
1.2 KiB
Plaintext
50 lines
1.2 KiB
Plaintext
{
|
|
"$schema": "https://fbflipper.com/schemas/plugin-package/v2.json",
|
|
"name": "{{package_name}}",
|
|
"id": "{{id}}",
|
|
"version": "1.0.0",
|
|
"pluginType": "client",
|
|
"main": "dist/bundle.js",
|
|
"flipperBundlerEntry": "src/index.tsx",
|
|
"license": "MIT",
|
|
"keywords": [
|
|
"flipper-plugin"
|
|
],
|
|
"icon": "apps",
|
|
"title": "{{title}}",
|
|
"scripts": {
|
|
"lint": "flipper-pkg lint",
|
|
"prepack": "flipper-pkg lint && flipper-pkg bundle",
|
|
"build": "flipper-pkg bundle",
|
|
"watch": "flipper-pkg bundle --watch",
|
|
"test": "jest --no-watchman"
|
|
},
|
|
"peerDependencies": {
|
|
"@emotion/styled": "latest",
|
|
"flipper-plugin": "^{{flipper_version}}",
|
|
"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",
|
|
"@types/react-dom": "latest",
|
|
"antd": "latest",
|
|
"flipper-plugin": "latest",
|
|
"flipper-pkg": "latest",
|
|
"jest": "latest",
|
|
"jest-mock-console": "latest",
|
|
"react": "latest",
|
|
"react-dom": "latest",
|
|
"typescript": "latest"
|
|
},
|
|
"jest": {
|
|
"testEnvironment": "jsdom"
|
|
}
|
|
}
|