devgripes/test-use-global-hook.md

## test-use-global-hook.md

      
    Raw
  

              test-use-global-hook.md
            
          
    LoginForm.js
import React, { useState } from "react";

import useGlobal from "../../store";

function LoginForm() {
  const [loginUser, setUser] = useState();
  const [globalState, globalActions] = useGlobal();
  const { status, errorMessage } = globalState;

  const onChange = e => {
    e.persist();
    setUser({ ...loginUser, [e.target.name]: e.target.value });
  };

  const onLoginSubmit = e => {
    e.preventDefault();
    globalActions.login.userLogin(loginUser);
  };

  return (
    <div className="container">
      <form onSubmit={onLoginSubmit}>
        <div className="form-group">
          <label htmlFor="usernameInput">Username</label>
          <input
            name="username"
            type="text"
            className="form-control"
            placeholder="Enter username"
            onChange={onChange}
          />
        </div>
        <div className="form-group">
          <label htmlFor="inputPassword">Password</label>
          <input
            name="password"
            type="password"
            className="form-control"
            placeholder="Password"
            onChange={onChange}
          />
        </div>
        <button type="submit" className="btn btn-primary">
          Submit
        </button>
      </form>
      {status === "LOADING" ? <div>Loading...</div> : null}
      {status === "SUCCESS" ? (
        <div>Successfull login</div>
      ) : (
        <div>{errorMessage}</div>
      )}
    </div>
  );
}

export default LoginForm;

LoginForm.test.js
import React from "react";
import { render, cleanup } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";

import useGlobal from "../../../store";

import LoginForm from "../LoginForm";

afterEach(cleanup);

it("render component", () => {
  const { container, getByText } = render(<Page />);
  expect(getByText("Username")).toBeInTheDocument();
});

error:
 FAIL  src/components/login/__tests__/Form.test.js
  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /Users/kuronaru/Projects/mansoler_workspace/erams-ts/node_modules/use-global-hook/index.js:63
    export default useStore;
    ^^^^^^

    SyntaxError: Unexpected token export

      1 | import React from "react";
    > 2 | import useGlobalHook from "use-global-hook";
        | ^
      3 |
      4 | import * as actions from "../actions";
      5 |

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
      at Object.<anonymous> (src/store/index.js:2:1)