This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
npm install relay-compiler babel-plugin-relay react-relay @testing-library/react relay-test-utils react-test-renderer --save |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { useEffect, useState } from 'react'; | |
import { HelloQuery } from './relay/graphql/query/Hello'; | |
import { fetchQuery } from './relay/index'; | |
// getting a test environment as props | |
export default function Testing({ environment }) { | |
// a react useState hook | |
const [text, setText] = useState(''); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import { render } from '@testing-library/react'; | |
/** | |
* | |
* @param {React component} any React component | |
* @returns React component wrapped around with the store | |
*/ | |
const Provider = ({ children }) => { | |
return <> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { screen, waitFor } from '@testing-library/react'; | |
import { | |
createMockEnvironment, | |
MockPayloadGenerator, | |
} from 'relay-test-utils'; | |
import ReactTestRenderer from 'react-test-renderer'; | |
import { customRender } from './testUtils/test-utils'; | |
import Testing from './Testing'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export default function Testing({ environment }) { | |
// a react useState hook | |
const [text, setText] = useState(''); | |
const makeApiCall = () => { | |
// Make the graphQL call by passing the test environment | |
fetchQuery(HelloQuery, {}, environment).subscribe({ | |
next: (data) => { | |
// The HelloQuery will return a string, so we can set that to |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
console.log | |
Sample | |
at Object.next (src/Testing.js:13:19) | |
PASS src/mock.test.js | |
✓ Mocking GraphQL queries (42 ms) | |
Test Suites: 1 passed, 1 total | |
Tests: 1 passed, 1 total |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
npm i -D rollup rollup-plugin-typescript2 @rollup/plugin-commonjs @rollup/plugin-node-resolve rollup-plugin-peer-deps-external rollup-plugin-postcss node-sass sass |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from "react"; | |
import { SampleComponentProps } from "./SampleComponent.types"; | |
import "./SampleComponent.scss"; | |
const SampleComponent: React.FC<SampleComponentProps> = ({ text }) => ( | |
<div | |
className="sample-component" | |
> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import SampleComponent from './SampleComponent/SampleComponent'; | |
export { SampleComponent }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
npm i --save-dev jest ts-jest @types/jest identity-obj-proxy @testing-library/react @testing-library/jest-dom jest-environment-jsdom |
OlderNewer