A containerized UI development environment for quick coding sessions
341
From your development directory, <dev>, create a file <dev>/src/App.js.
Here's an example component.
import styled from "@emotion/styled";
import React from "react";
const Header = styled("h1")`
font-family: sans-serif;
`;
const App = () => (
<div>
<Header data-testid="header">🔥 UI Dev Env</Header>
</div>
);
export default App;
Then from <dev> run:
docker run -it --rm -p 3000:3000 -v $(PWD)/src:/usr/app/src slightlytyler/ui-dev-env dev
To use tests, create a test file <dev>/src/App.test.js.
Here's an example test.
import React from "react";
import { cleanup, render, waitForElement } from "react-testing-library";
import "jest-dom/extend-expect";
import App from "./App";
test("it should render a spicy header", async () => {
const { getByTestId } = render(<App />);
const headerNode = await waitForElement(() => getByTestId("header"));
expect(headerNode).toHaveTextContent("UI");
expect(headerNode).toHaveTextContent("🔥");
});
Then from <dev> run:
docker run -it --rm -p 3000:3000 -v $(PWD)/src:/usr/app/src slightlytyler/ui-dev-env test
To format the source files run:
docker run -it --rm -p 3000:3000 -v $(PWD)/src:/usr/app/src slightlytyler/ui-dev-env fmt
Content type
Image
Digest
Size
41.8 MB
Last updated
almost 8 years ago
docker pull slightlytyler/ui-dev-env