Migrate to Relay Modern #616
Conversation
New dependencies added: relay-runtime, @playlyfe/gql, @types/react, babel-plugin-relay, babel-preset-es2015, babel-preset-react, babel-preset-stage-0, jest-styled-components and relay-compiler. relay-runtimeAuthor: Unknown Description: A core runtime for building GraphQL-driven applications. Homepage: https://facebook.github.io/relay/
|
| Created | about 2 years ago |
| Last Updated | 11 days ago |
| License | BSD-3-Clause |
| Maintainers | 6 |
| Releases | 15 |
| Direct Dependencies | graphql, babel-runtime and babel-types |
| Keywords | graphql, relay, babel and babel-plugin |
README
ERROR: No README data found!
yarn why babel-plugin-relay output
babel-preset-es2015
Author: Sebastian McKenzie
Description: Babel preset for all es2015 plugins.
Homepage: https://babeljs.io/
README
babel-preset-es2015
Babel preset for all es2015 plugins.
Install
npm install --save-dev babel-preset-es2015Usage
Via .babelrc (Recommended)
.babelrc
{
"presets": ["es2015"]
}Via CLI
babel script.js --presets es2015Via Node API
require("babel-core").transform("code", {
presets: ["es2015"]
});Options
loose
boolean, defaults to false.
Enable "loose" transformations for any plugins in this preset that allow them.
modules
"amd" | "umd" | "systemjs" | "commonjs" | false, defaults to "commonjs".
Enable transformation of ES6 module syntax to another module type.
Setting this to false will not transform modules.
spec
boolean, defaults to false.
Enable "spec" transformations for any plugins in this preset that allow them.
yarn why babel-preset-es2015 output
Has been hoisted to "babel-preset-es2015"This module exists because it's specified in "dependencies".Disk size without dependencies: "24kB"Disk size with unique dependencies: "644kB"Disk size with transitive dependencies: "15.27MB"Number of shared dependencies: 53
babel-preset-react
Author: Sebastian McKenzie
Description: Babel preset for all React plugins.
Homepage: https://babeljs.io/
| Created | almost 2 years ago |
| Last Updated | 6 days ago |
| License | MIT |
| Maintainers | 5 |
| Releases | 33 |
| Direct Dependencies | babel-preset-flow, babel-plugin-syntax-jsx, babel-plugin-transform-react-display-name, babel-plugin-transform-react-jsx, babel-plugin-transform-react-jsx-source and babel-plugin-transform-react-jsx-self |
README
babel-preset-react
Babel preset for all React plugins.
This preset includes the following plugins/presets:
Install
You can also check out the React Getting Started page
For more info, check out the setup page on the cli and the usage docs.
Install the CLI and this preset
npm install --save-dev babel-cli babel-preset-reactMake a .babelrc config file with the preset
echo '{ "presets": ["react"] }' > .babelrcCreate a file to run on
echo '<h1>Hello, world!</h1>' > index.jsView the output
./node_modules/.bin/babel index.jsUsage
Via .babelrc (Recommended)
.babelrc
{
"presets": ["react"]
}Via CLI
babel script.js --presets react Via Node API
require("babel-core").transform("code", {
presets: ["react"]
});yarn why babel-preset-react output
babel-preset-stage-0
Author: Sebastian McKenzie
Description: Babel preset for stage 0 plugins
Homepage: https://babeljs.io/
| Created | almost 2 years ago |
| Last Updated | 9 days ago |
| License | MIT |
| Maintainers | 5 |
| Releases | 27 |
| Direct Dependencies | babel-plugin-transform-do-expressions, babel-plugin-transform-function-bind and babel-preset-stage-1 |
README
babel-preset-stage-0
Babel preset for stage 0 plugins.
Install
npm install --save-dev babel-preset-stage-0Usage
Via .babelrc (Recommended)
.babelrc
{
"presets": ["stage-0"]
}Via CLI
babel script.js --presets stage-0Via Node API
require("babel-core").transform("code", {
presets: ["stage-0"]
});yarn why babel-preset-stage-0 output
jest-styled-components
Author: Michele Bertoli
Description: Jest utilities for Styled Components
Homepage: https://github.com/styled-components/jest-styled-components#readme
| Created | 6 months ago |
| Last Updated | 3 days ago |
| License | MIT |
| Maintainers | 2 |
| Releases | 60 |
| Direct Dependencies | css |
README
Jest Styled Components
A set of utilities for testing Styled Components with Jest.
This package improves the snapshot testing experience and provides a brand new matcher to make expectations on the style rules.
Quick Start
Installation
yarn add --dev jest-styled-componentsUsage
import React from 'react'
import styled from 'styled-components'
import renderer from 'react-test-renderer'
import 'jest-styled-components'
const Button = styled.button`
color: red;
`
test('it works', () => {
const tree = renderer.create(<Button />).toJSON()
expect(tree).toMatchSnapshot()
expect(tree).toHaveStyleRule('color', 'red')
})Snapshot Testing
Jest snapshot testing is an excellent way to test React components (or any serializable value) and make sure things don't change unexpectedly.
It works with Styled Components but there are a few problems that this package addresses and solves.
For example, suppose we create this styled Button:
import styled from 'styled-components'
const Button = styled.button`
color: red;
`Which we cover with the following test:
import React from 'react'
import renderer from 'react-test-renderer'
test('it works', () => {
const tree = renderer.create(<Button />).toJSON()
expect(tree).toMatchSnapshot()
})When we run our test command, Jest generates a snapshot containing a few class names (which we didn't set) and no information about the style rules:
exports[`it works 1`] = `
<button
className="sc-bdVaJa rOCEJ"
/>
`;Consequently, changing the color to green:
const Button = styled.button`
color: green;
`Results in the following diff, where Jest can only tell us that the class names are changed.
Although we can assume that if the class names are changed the style rules are also changed, this is not optimal (and is not always true).
- Snapshot
+ Received
<button
- className="sc-bdVaJa rOCEJ"
+ className="sc-bdVaJa hUzqNt"
/>Here's where Jest Styled Components comes to rescue.
We just import the package into our test file:
import 'jest-styled-components'When we rerun the test, the output is different: the style rules are included in the snapshot, and the hashed class names are substituted with placeholders that make the diffs less noisy:
- Snapshot
+ Received
+.c0 {
+ color: green;
+}
+
<button
- className="sc-bdVaJa rOCEJ"
+ className="c0"
/>This is the resulting snapshot:
exports[`it works 1`] = `
.c0 {
color: green;
}
<button
className="c0"
/>
`;Now, suppose we change the color again to blue:
const Button = styled.button`
color: blue;
`Thanks to Jest Styled Components, Jest is now able to provide the exact information and make our testing experience even more delightful 💖:
- Snapshot
+ Received
.c0 {
- color: green;
+ color: blue;
}
<button
className="c0"
/>Enzyme
enzyme-to-json is necessary to generate snapshots using Enzyme's shallow or full DOM rendering.
yarn add --dev enzyme-to-jsonIt can be enabled globally in the package.json:
"jest": {
"snapshotSerializers": [
"enzyme-to-json/serializer"
]
}Or imported in each test:
import toJson from 'enzyme-to-json'
// ...
expect(toJson(wrapper)).toMatchSnapshot()Jest Styled Components works with shallow rendering:
import { shallow } from 'enzyme'
test('it works', () => {
const wrapper = shallow(<Button />)
expect(wrapper).toMatchSnapshot()
})And full DOM rendering as well:
import { mount } from 'enzyme'
test('it works', () => {
const wrapper = mount(<Button />)
expect(wrapper).toMatchSnapshot()
})toHaveStyleRule
The toHaveStyleRule matcher is useful to test if a given rule is applied to a component.
The first argument is the expected property, the second is the expected value (string or RegExp).
test('it works', () => {
const tree = renderer.create(<Button />).toJSON()
expect(tree).toHaveStyleRule('color', 'red')
})The matcher supports a third options parameter which makes it possible to search for rules nested within an At-rule (media and supports) or to add modifiers to the class selector. This feature is supported in React only, and more options are coming soon.
const Button = styled.button`
@media (max-width: 640px) {
&:hover {
color: red;
}
}
`
test('it works', () => {
const tree = renderer.create(<Button />).toJSON()
expect(tree).toHaveStyleRule('color', 'red', {
media: '(max-width: 640px)',
modifier: ':hover',
})
})This matcher works with trees serialized with react-test-renderer and shallow renderered or mounted with Enzyme.
It checks the style rules applied to the root component it receives, therefore to make assertions on components further in the tree they must be provided separately (Enzyme's find might help).
To use the toHaveStyleRule matcher with React Native, change the import statement to:
import 'jest-styled-components/native'Global installation
It is possibile to setup this package for all the tests using the setupTestFrameworkScriptFile option:
"jest": {
"setupTestFrameworkScriptFile": "./setupTest.js"
}And import the library once in the setupTest.js as follows:
import 'jest-styled-components'styled-components < v2
To use this package with styled-components < v2 (e.g. v1.4.6) the following annotation must be added at the top of the test files.
Consequently, it won't be possible to use Enzyme's full DOM rendering.
/**
* @jest-environment node
*/Contributing
Please open an issue and discuss with us before submitting a PR.
yarn why jest-styled-components output
Generated by 🚫 dangerJS
Generated by 🚫 dangerJS |
|
I wonder what it is about this PR that breaks danger |
Otherwise tsc prefixes the call with a namespace like `compat_1.graphql`.
* Relay objects are now frozen, so create new objects rather than trying to extend Relay objects. * Fix GraphQL typing issue.
|
RN 0.48 has issues with node 8.4 - it's not our official emission node version - but worth a mention facebook/react-native#15810 if anyone else has this error: |
Fixes tests on relay modern branch
|
🚨 Alrighty merging! 🚨 @sarahscott @alloy We got all tests and build green (aside from the |
|
Congrats |
|
SO. HAPPY! 🎉 |
This depends on these Relay patches https://github.com/alloy/relay/pull/4
graphqlcalls.__idglobal ID field.__idsupport)TODOitems in the code base.__idisn’t being stripped out and thus incompatible with Relay Modern, see e.g. https://github.com/facebook/relay/blob/77dcb6a0b4f11be4799d59447d19903b61218ca0/packages/relay-runtime/store/RelayModernRecord.js#L90