Support testing Slice API #37139
-
Preliminary Checks
DescriptionWhen using the new Slice API in a React component, that component cannot then be easily tested using Jest. e.g. given a page component like so: const IndexPage = () => (
<>
<Slice alias="header" />
<p>Hello</p>
</>
)And a test like so: describe("IndexPage", () => {
it("renders correctly", () => {
const tree = renderer
.create(<IndexPage />)
.toJSON()
expect(tree).toMatchSnapshot()
})
})Running Enabling slices by setting Reproduction Linkhttps://github.com/ghostcassette/gatsby-slice-testing Steps to Reproduce
Expected ResultIf the Slice API is disabled, the test should run with the If the Slice API is enabled, the test should run, replacing the Actual ResultWhen the Slice API is disabled, the tests throw a When the Slice API is enabled, the tests throw a EnvironmentSystem:
OS: macOS 12.6.1
CPU: (10) arm64 Apple M1 Max
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 18.12.1 - ~/.nodes/node-18.12.1/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 8.19.2 - ~/.nodes/node-18.12.1/bin/npm
Languages:
Python: 3.9.9 - /Users/mudge/.pyenv/shims/python
Browsers:
Chrome: 107.0.5304.121
Firefox: 105.0.3
Safari: 16.1
npmPackages:
gatsby: ^5.2.0 => 5.2.0Config FlagsNo. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 3 replies
-
Wouldn't that be the task of a Jest snapshot serializer? e.g. like https://github.com/tribou/jest-serializer-path The code (https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/cache-dir/slice.js#L8) could have a check for testing environment but if it can be achieved outside of that I'd prefer that.
That won't easily be possible in a test environment, you need to mock the context provider(s) and have the information that would normally be provided via createPage in gatsby-node. You'd also be testing our implementation of it (that it gets replaced) which doesn't give any benefit. So I don't think this use case should be handled. |
Beta Was this translation helpful? Give feedback.
-
|
For what it's worth, we're working around this by mocking out the module.exports = {
...gatsby,
Slice: jest
.fn()
.mockImplementation(({ alias }) =>
React.createElement('div', { className: `slice--${alias}` })
),
}As for the enabled/disabled distinction: I was surprised that the Perhaps this can be remedied with an update to the "Unit Testing" guide alone to recommend mocking |
Beta Was this translation helpful? Give feedback.
-
This was added when we worked on this during Gatsby 4 and they weren't enabled by default. So eventually this env var will go away. Updating the docs sounds good, I'll put up a PR. Thanks for the request! |
Beta Was this translation helpful? Give feedback.
-
|
PR is up: #37141 |
Beta Was this translation helpful? Give feedback.
Wouldn't that be the task of a Jest snapshot serializer? e.g. like https://github.com/tribou/jest-serializer-path
The code (https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/cache-dir/slice.js#L8) could have a check for testing environment but if it can be achieved outside of that I'd prefer that.
That won't easily be possible in a test environment, you need to mock the context provider(s) and have the informatio…