kentcdodds / react-testing-library-examples Goto Github PK

I'll rewrite them with hooks and fix them all. Probably I'll add some other tests on it too. Any ideas for new tests?

How can I get the updated value from context. In my case, I have a button, when I click on button, the data-context is update then UI update too, I don't know how to get the updated data-context and checking is UI update success or not.

Here is my code get from example

function useTestContext () {
  const state = useContext(ThemeContext);
  return state;
};

function testHookWithThemeProvider(callback) {
  return render(
    <ThemeProvider>
       <Form />
       <TestHook callback={callback} />
    </ThemeProvider>
  );
}

test('Context update',() => {
  let updateState;

  const { container, rerender } = testHookWithThemeProvider(() => {
    updateState = useTestContext();
  });

})

const button = container.querySelector('button.btn');
fireEvent.click(button);

// I not sure implement this rerender here.
rerender(
  <ThemeProvider>
    <Form />
    <TestHook 
      callback={() => { updateState = useTestContext(); }} 
    />
  </ThemeProvider>
)

expect(button.className).toEqual('btn dark');
// Fail. Still the same as initial. 

I've noticed that this repo has both NPM and Yarn lockfiles committed. Is this intentional?

It's generally not recommended, because lockfiles always differ (unless you run both npm install and yarn add for each dependency change), which results into different set of 3rd and 4th party dependencies being installed for users.

I found that react-router.js test is broken with latest version of history (currently @ 5.0.0):

$ yarn upgrade history@latest
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ [email protected]
info All dependencies
└─ [email protected]
✨  Done in 33.73s.

$ yarn test
$ jest
 PASS   sandbox  src/__tests__/react-redux.js (6.666s)
 PASS   sandbox  src/__tests__/portals.js (6.842s)
 FAIL   sandbox  src/__tests__/react-router.js (6.952s)
  ● full app rendering/navigating

    expect(received).toMatch(expected)

    Expected substring: "You are on the about page"
    Received string:    "<div><a href=\"/\">Home</a><a href=\"/about\">About</a><div>No match</div><div data-testid=\"location-display\"></div></div>"

      52 |   fireEvent.click(screen.getByText(/about/i), leftClick)
      53 |   // normally I'd use a data-testid, but just wanted to show this is also possible
    > 54 |   expect(container.innerHTML).toMatch('You are on the about page')
         |                               ^
      55 | })
      56 | 
      57 | test('landing on a bad page', () => {

      at Object.<anonymous> (../src/__tests__/react-router.js:54:31)

 PASS   local  src/__local_tests__/mock.react-router.js
 PASS   local  src/__local_tests__/async-with-mock.js
 PASS   local  src/__local_tests__/component-did-catch.js
 PASS   sandbox  src/__tests__/i18next.js
 PASS   sandbox  src/__tests__/async.js
 PASS   sandbox  src/__tests__/on-change.js
 PASS   local  src/__local_tests__/shallow.react-transition-group.js
 PASS   local  src/__local_tests__/mock.react-transition-group.js
 PASS   sandbox  src/__tests__/window-resize.js
 PASS   sandbox  src/__tests__/react-lazy-and-suspense.js
 PASS   sandbox  src/__tests__/upload-file.js
 PASS   sandbox  src/__tests__/update-props.js
 PASS   sandbox  src/__tests__/react-context.js

Test Suites: 1 failed, 1 skipped, 15 passed, 16 of 17 total
Tests:       1 failed, 1 skipped, 25 passed, 27 total
Snapshots:   0 total
Time:        19.537s
Ran all test suites in 2 projects.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

What an awesome collection of tests - really good job.

There is however a lot of them that are failing (which might be due to some codesandbox issue)

Hello,
I'm writing just to report that all of the examples are currently failing in CodeSandbox, while they are still running perfectly on my local machine.

This is the reported error:

Identifier 'test' has already been declared

SyntaxError: Identifier 'test' has already been declared
    at eval (<anonymous>)
    at Eo (https://codesandbox.io/static/js/sandbox.6079041c3.js:1:201748)
    ...

I noticed this error while trying to develop my own CodeSandbox with tests involving @testing-library/react and @testing-library/jest-dom; when I tried this reference CodeSandbox I got the same error.

HTH

Hello,

I have a reducer:
case STORE_GROUPS: return state .set('showEditGroupPage', false) .....

Whenever a button is clicked, reducer updates showEditGroupPage field in redux state.
case ADD: return state .set('showEditGroupPage', true)....

Then mapStateToProps will get the latest showEditGroupPage from state, to make a DOM element visible.
const mapStateToProps = state => { const showGroupPage = state.get('showEditGroupPage') .....

Based on this showGroupPage flag I hide Add button and show some other content.

This works perfectly in browser. I am logging showEditGroupPage in both reducer and mapStateToProps. It shows proper updates in browser:

I wrote unit tests to check this functionality:

But while running this test, it doesn't properly updates mapStateToProps. I mean, even after 'ADD_TARGET_GROUP' switch case updates showEditGroupPage to true, still it is printed as false in mapStateToProps. Hence expected DOM is not rendered. Below is the screenshot from terminal:

As showEditGroupPage is not changed in the state, DOM is unable to find expected new element/text.

I followed https://testing-library.com/docs/example-react-redux to test real redux flow rather than a mock flow. But this stops my progress. I request your help.

Thanks
Avinash

Reported at testing-library/testing-library-docs#37

package.json still has "test": "jest", but should be "test": "react-scripts test",

Most people esp. new comers use create-react-app which installs jest in the innards
so if anyone runs yarn test it with your clone it does not work until package.json is edited

Please fix if relevant