2023-05-01
やること宣言
gaaamii.icon
勉強中メモ
gaaamii.icon
Reactとかだとそれ用のrender関数を提供するライブラリ（@testing-library/react）があるから、それを使えばいいだけなのだけど、Elmはなさそう
@testing-library/elm、自分でつくれるものなんだろうか
@testing-library/reactの実装を少し読んでみる
難しそう
むしろDOM Testing Libraryのサンプルを少し置き換えるくらいがてっとり早くて良いかも
基本的にはgetByLabelTextのような関数にDOMを渡せば良い
何も考えずにやるとこうなる
code:error
Details:
/Users/gaaamii/dev/nekobito/src/elm/Main.elm:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){port module Main exposing (Model, ModelExposedToStorage, Msg(..), appListItemClass, emptyModel, init, main, setStorage, update, updateWithStorage, view)
^^^^^^
SyntaxError: Unexpected identifier
1 | import FileHandleManager from "./FileHandleManager";
2 | import { Elm } from "../elm/Main.elm";
| ^
3 |
4 | const runElmApp = () => {
5 | const storedState = localStorage.getItem("elm-editor-save");
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1495:14)
at Object.require (src/js/runElmApp.js:2:1)
at Object.require (src/__tests__/example.js:5:1)
アプリケーションのほうはparcelにやってもらってたからそりゃそうか
こうしたらどうかな
code:jest.config.js
transform: {
"\\.jtsx?$": "babel-jest", "\\.elm$": "@parcel/transformer-elm",
}
こうなった
code:error
Ran all test suites.
Error: ● Invalid transformer module:
"/Users/gaaamii/dev/nekobito/node_modules/@parcel/transformer-elm/lib/ElmTransformer.js" specified in the "transform" object of Jest configuration
must export a process or processAsync or createTransformer function.
Code Transformation Documentation:
これはなかなかきびしい
いっそのこと、buildしたファイルから文字列として読み込んで、parseとexecをするのはどうだろうか
code:こんなかんじで.js
function runElmApp() {
const htmlString = await fs.readFile("build/index.html", "utf-8")...
const jsString = await fs.readFile("build/index.458462fc.js.js", "utf-8")...
const parser = new DOMParser()
root = parser.parseFromString(htmlString)
body = dom.querySelector('#root')
document.body.appendChild(body.children)
exec(jsString)
return root
}
test('Show textarea', async () => {
const container = runElmApp()
expect(
await findByPlaceholderText(container, 'Markdown text here')
).toBeInTheDocument()
})
やったこと
gaaamii.icon