Allow passing options to react-test-renderer .create() method #896

jrdrg · 2017-04-15T19:11:36Z

Issue:
When running storyshots with a story for a component that uses refs, it will throw a null reference error (see facebook/react#7371)

What I did

This PR adds the ability to pass options to the react-test-renderer create method, for example to allow mocking refs as per https://facebook.github.io/react/blog/2016/11/16/react-v15.4.0.html#mocking-refs-for-snapshot-testing

How to test

Run yarn test - ComponentWithRef.stories.js should use the createNodeMock function defined in storyshots.test.js to mock its ref and not fail with a null reference error. The story for ComponentWithRef attempts to get the scrollWidth of a div when the component mounts.

jrdrg · 2017-04-15T19:15:11Z

@shilman - reopening storybook-eol/storyshots#76 here

JaKXz · 2017-04-26T20:05:48Z

@jrdrg thanks for doing this work! Is there anything I can do to help get this merged? :)

I've been trying to run this branch locally but not having any luck with installing dependencies (using the latest versions of yarn, node etc) and getting the tests to run / pass.

jrdrg · 2017-04-26T21:57:51Z

@JaKXz I'm seeing this when running the tests from the storybook root dir after doing an install via lerna, which seems to be why the build is failing.

Summary of all failing tests
 FAIL  packages/storyshots/stories/__test__/storyshots.test.js
  ● Storyshots › Component with ref › on mount

    TypeError: Cannot read property 'emit' of null

If I yarn install directly in the storyshots directory and then run jest from there, it works fine - from some other github issues elsewhere I assume this has to do with storybook-addons somehow but haven't really gotten a chance to dig into it super deeply yet.

theinterned · 2017-04-27T21:22:29Z

I wanted to get a PR in for this issue, but I can't run tests in the StoryShots package in the mono repo, so I made a working PR for the deprecated StoryShots repo instead:

storybook-eol/storyshots#98

codecov · 2017-04-28T17:39:28Z

Codecov Report

❗ No coverage uploaded for pull request base (master@3732bcd). Click here to learn what that means.
The diff coverage is 0%.

@@           Coverage Diff           @@
##             master   #896   +/-   ##
=======================================
  Coverage          ?     0%           
=======================================
  Files             ?      2           
  Lines             ?     16           
  Branches          ?      3           
=======================================
  Hits              ?      0           
  Misses            ?     13           
  Partials          ?      3

Impacted Files	Coverage Δ
.../stories/required_with_context/ComponentWithRef.js	`0% <0%> (ø)`
.../required_with_context/ComponentWithRef.stories.js	`0% <0%> (ø)`

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 3732bcd...136d62d. Read the comment docs.

jrdrg · 2017-04-28T18:40:29Z

@JaKXz @ndelangen @theinterned I fixed up the stuff that was preventing the tests from passing, looks like the build succeeded this time

ndelangen · 2017-04-28T21:01:25Z

.jestrc

@@ -3,7 +3,8 @@
  "clearMocks": true,
  "moduleNameMapper": {
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
-    "\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.js"
+    "\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.js",
+    "@kadira/storybook-addons": "<rootDir>/packages/addons/dist/index.js"


What's this for?

I was running into this issue storybook-eol/storybook-addons#1 when trying to run yarn test from the storybook root directory. So I added some console.logs while debugging and determined that this constructor https://github.com/storybooks/storybook/blob/master/packages/addons/src/index.js#L2 was getting called 3 times during the storyshots test, when it seemed to me it should be a singleton. Running the tests in the package itself (i.e. not using lerna and doing a yarn install directly from /packages/storyshots) worked fine, so I figured it might have something to do with jest resolving the symlinks so adding this line makes sure that all references to storybook-addons use the same absolute path.

ndelangen · 2017-04-28T21:08:02Z

packages/storyshots/.jestrc

@@ -0,0 +1,20 @@
+{


why are there 2 pretty much identical .jestrc files?

The second .jestrc file is for the test-examples script. Running yarn test uses the .jestrc in the root directory, but yarn test-examples uses lerna to run npm test in each package's directory. If I used "test": "jest --config ../../.jestrc" in the storyshots directory to reference the jestrc in the root, I ran into this error:

lerna ERR! test Errored while running script in 'storyshots' lerna ERR! execute Error: Command failed: npm run test lerna ERR! execute ● Validation Error: lerna ERR! execute lerna ERR! execute Module ./node_modules/jest-enzyme/lib/index.js in the setupTestFrameworkScriptFile option was not found. lerna ERR! execute lerna ERR! execute Configuration Documentation: lerna ERR! execute https://facebook.github.io/jest/docs/configuration.html

The rootDir is also different for yarn test and yarn test-examples, so I copied the .jestrc from the root dir here and made a few minor changes to the paths so I could do "test": "jest --config ./.jestrc" in the storyshots package.json.

@ndelangen is there a better way to handle this?

I think Jest v20 takes care of a lot of the multi-project test running stuff.

Looks like test-examples was removed, so I removed this extra .jestrc

ndelangen · 2017-04-28T21:11:02Z

packages/storyshots/src/index.js

@@ -14,10 +14,13 @@ const babel = require('babel-core');
 const pkg = readPkgUp.sync().pkg;
 const isStorybook =
  (pkg.devDependencies && pkg.devDependencies['@kadira/storybook']) ||


Looks like, this could be extracted into a function?

…yshots

ndelangen · 2017-05-21T13:13:14Z

Ouch this is taking long, sorry!, I can see you're taking the effort to get this merged.

ndelangen · 2017-05-21T14:17:02Z

@jrdrg I can't push to your fork, so to rebase I had to push a branch to our repo and create a new PR: #1085

Thanks for the work! I'll ask @tmeasday to review.

See for instance #896 -- it's a common problem to need mocked nodes. This solution is probably a bit of a bandaid, as large projects would probably want to set options per-story, this is a lot better than nothing in the meantime.

jrdrg force-pushed the test-renderer-options branch 5 times, most recently from b083f2a to f27db8b Compare April 17, 2017 15:13

theinterned mentioned this pull request Apr 27, 2017

Pass options to test renderer storybook-eol/storyshots#98

Closed

ndelangen mentioned this pull request Apr 28, 2017

Add unit tests for addon storyshots #971

Merged

jrdrg force-pushed the test-renderer-options branch 3 times, most recently from 0437617 to 072f7ed Compare April 28, 2017 17:39

ndelangen reviewed Apr 28, 2017

View reviewed changes

jrdrg force-pushed the test-renderer-options branch 3 times, most recently from 8bd1551 to 93bfda3 Compare May 11, 2017 20:44

jrdrg and others added 10 commits May 18, 2017 14:17

Allow passing options to react-test-renderer .create() method

af02d80

fix lint errors

3d4d07c

add test script back

f814ccc

Update .jestrc to avoid problem with multiple storybook-addons instances

eec3a52

Updated to check for 'storybook' when determining whether to run stor…

21bdb85

…yshots

add react-test-renderer as dev dependency

20ca07c

resolve configPath from test dir

f1b1c31

Add .jestrc to storyshots dir so that test-examples script passes

22ab2f3

fixed error in storyshots .jestrc

8438988

Extract storyshots package dependency check into a separate function

f2fdbc7

John Rodriguez added 2 commits May 18, 2017 14:24

remove storyshots/.jestrc

431b6c3

update snapshot

01f480a

jrdrg force-pushed the test-renderer-options branch from 9fa5a1d to 01f480a Compare May 18, 2017 18:24

fix lint errors

bd7b71f

jrdrg force-pushed the test-renderer-options branch from ad6fdf2 to bd7b71f Compare May 18, 2017 18:43

move files to new path

7156191

jrdrg force-pushed the test-renderer-options branch from e276422 to 7156191 Compare May 18, 2017 19:09

update snapshots

136d62d

ndelangen mentioned this pull request May 21, 2017

Test renderer options #1085

Closed

ndelangen closed this May 21, 2017

tmeasday mentioned this pull request May 22, 2017

Added snapshotWithOptions to configure storyshots rendering options #1090

Merged

shilman added the misc label May 27, 2017

This was referenced Jan 22, 2020

[Snyk] Fix for 1 vulnerabilities yutiansut/storybook#99

Open

[Snyk] Fix for 1 vulnerabilities adrukh/storybook#73

Open

snyk-bot mentioned this pull request Dec 29, 2020

[Snyk] Security upgrade ts-loader from 3.5.0 to 6.0.0 adrukh/storybook#152

Open

adrukh mentioned this pull request Jan 9, 2023

[Snyk] Fix for 1 vulnerabilities adrukh/storybook#348

Open

adrukh mentioned this pull request Nov 27, 2023

[Snyk] Fix for 21 vulnerabilities adrukh/storybook#396

Open

adrukh mentioned this pull request May 22, 2024

[Snyk] Security upgrade ts-loader from 3.5.0 to 6.0.0 adrukh/storybook#441

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Allow passing options to react-test-renderer .create() method #896

Allow passing options to react-test-renderer .create() method #896

jrdrg commented Apr 15, 2017

jrdrg commented Apr 15, 2017

JaKXz commented Apr 26, 2017 •

edited

Loading

jrdrg commented Apr 26, 2017 •

edited

Loading

theinterned commented Apr 27, 2017

codecov bot commented Apr 28, 2017 •

edited

Loading

jrdrg commented Apr 28, 2017

ndelangen Apr 28, 2017

jrdrg Apr 28, 2017

ndelangen Apr 28, 2017

jrdrg Apr 28, 2017

jrdrg May 9, 2017

JaKXz May 9, 2017

jrdrg May 10, 2017

ndelangen Apr 28, 2017

ndelangen commented May 21, 2017

ndelangen commented May 21, 2017

Allow passing options to react-test-renderer .create() method #896

Allow passing options to react-test-renderer .create() method #896

Conversation

jrdrg commented Apr 15, 2017

What I did

How to test

jrdrg commented Apr 15, 2017

JaKXz commented Apr 26, 2017 • edited Loading

jrdrg commented Apr 26, 2017 • edited Loading

theinterned commented Apr 27, 2017

codecov bot commented Apr 28, 2017 • edited Loading

Codecov Report

jrdrg commented Apr 28, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ndelangen commented May 21, 2017

ndelangen commented May 21, 2017

JaKXz commented Apr 26, 2017 •

edited

Loading

jrdrg commented Apr 26, 2017 •

edited

Loading

codecov bot commented Apr 28, 2017 •

edited

Loading